我已經構建了下面的大部分組件，但我被困在一個細節上。細節是整個內容應垂直居中，另外Icon組件應與組件的第一行居中對齊Text。（以下是所需的輸出）
@Composable
private fun MyBaseComponent(
@DrawableRes iconResId: Int? = null,
title: String? = null,
subtitle: String,
backgroundColor: Color,
itemColor: Color
) {
Box(
modifier = Modifier
.heightIn(min = 48.dp)
.fillMaxWidth()
.background(color = backgroundColor, shape = RoundedCornerShape(2.dp))
) {
Row(
modifier = Modifier.padding(MyTheme.spacing.double),
verticalAlignment = Alignment.CenterVertically
) {
iconResId?.let {
MyIcon(iconResId = iconResId, tint = itemColor)
Spacer(modifier = Modifier.padding(end = MyTheme.spacing.double))
}
Column(verticalArrangement = Arrangement.spacedBy(MyTheme.spacing.small)) {
title?.let { MyTitle(text = title, color = itemColor) }
MySubtitle(text = subtitle, color = itemColor)
}
}
}
}
此刻的樣子。一切似乎都很好，但除了圖示定位。
uj5u.com熱心網友回復：
用于padding(top = x.dp)偏移圖示或創建不同的層次結構，例如：
Column() {
MyTitle() // Also align to end of composable
Row {
Icon()
MySubtitle() // Align to end
}
}
可能需要一些調整，但希望你能明白
uj5u.com熱心網友回復：
verticalAlignment = Alignment.CenterVertically它將row垂直對齊內部的每個專案。
例如：你row的大小是50.dp和column其中包含的兩個textView幾乎相等45.dp，好嗎？現在這將對齊 centerVertically 這很好，但問題是你icon的大小，例如24.dp如果我們查看 的比例50.dp(row)，45.dp(column)那么根據 的icon比例24.dp相當大50.dp，我們無法清楚地看到根據的行為，45.dp但50.dp根據24.dp它可以清楚地看到可見。
您必須verticalAlignment = Alignment.CenterVertically從行中洗掉。
樣本：
@Composable
fun AlignmentProblem(
modifier: Modifier = Modifier
) {
Box(modifier = modifier) {
Row(
modifier = Modifier
.fillMaxWidth()
.height(400.dp)
.background(Color.Cyan)
) {
Icon(
painter = painterResource(id = R.drawable.ic_chat),
contentDescription = null
)
Column(
modifier = Modifier.fillMaxWidth()
.background(Color.LightGray),
horizontalAlignment = Alignment.CenterHorizontally
) {
Text(text = "What is Lorem Ipsum?")
Text(text = "Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.")
}
}
}
}
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/411485.html
標籤：
上一篇：如何在kotlin中添加串列