我正在研究每個修飾符的整個檔案。現在我在理解 compose 修飾符時遇到了一些問題。它是 .alignBy 修飾符。與 Box 和 Text 的對齊很清楚。文本通過其基線對齊。我可以看到文本的基線在哪里。洋紅色框的中間位置與紅色文本的基線位置相同。如果框更靠近行的頂部，則文本會向下滑動。
@Preview(heightDp = 200, backgroundColor = 0xFFCCCCCC, showBackground = true)
@Composable
fun test1() {
Row(Modifier.fillMaxHeight()) {
Box(
modifier = Modifier.size(80.dp, 40.dp)
.alignBy { it.measuredHeight / 2 }
.background(Color.Magenta)
)
Text(
text = "Text 1",
fontSize = 40.sp,
modifier = Modifier.alignByBaseline().background(color = Color.Red)
)
Text(
text = "Text 2",
modifier = Modifier.alignByBaseline().background(color = Color.Cyan)
)
}
}
現在我在一行中嘗試了兩個盒子，現在我不明白對齊是如何發生的。一個盒子的基線似乎在它的中間。我需要兩次“alignBy{}”嗎？我找不到很好的解釋，也找不到解釋我的問題的教程。我認為 Android Developers 上的檔案和示例并沒有多大幫助。
@Preview(heightDp = 200, backgroundColor = 0xFFCCCCCC, showBackground = true)
@Composable
fun test2() {
Row(Modifier.fillMaxHeight()) {
Box(
modifier = Modifier.size(80.dp, 40.dp)
.alignBy { it.measuredHeight / 1 }
.background(Color.Magenta)
)
Box(
modifier = Modifier.size(80.dp, 20.dp)
.alignBy { it.measuredHeight / 2 }
.background(Color.Green)
)
}
}
謝謝！
uj5u.com熱心網友回復：
從檔案：
在 a
Row中，所有具有 的組件將使用從 獲得的指定值或值alignBy垂直對齊，形成同級組。HorizontalAlignmentLinesalignmentLineBlock
在您的第二個示例中：
洋紅色Box放置在 Row 的頂部，因為它已Alignment.Top對齊Row。然后綠色Box( ) 的中心與洋紅色( )it.measuredHeight / 2的末端垂直對齊Boxit.measuredHeight / 1
使用：
Box(
modifier = Modifier.size(80.dp, 40.dp)
.alignBy { it.measuredHeight / 3 }
.background(Color.Magenta)
)
Box(
modifier = Modifier.size(80.dp, 20.dp)
.alignBy { it.measuredHeight / 2 }
.background(Color.Green)
)
然后洋紅色Box（ ）的 1/3 與綠色（）it.measuredHeight / 3的中間垂直對齊Boxit.measuredHeight / 2
請注意，必須為我們想要參與對齊的所有孩子指定alignBy()or 。alignByBaseline()
Row(Modifier.fillMaxHeight()) {
Box(
modifier = Modifier.size(80.dp, 40.dp)
.alignBy { it.measuredHeight / 1 }
.background(Color.Magenta)
)
Box(
modifier = Modifier.size(80.dp, 20.dp)
.alignBy { it.measuredHeight / 2 }
.background(Color.Green)
)
Box(
modifier = Modifier.size(20.dp, 20.dp)
.background(Color.Blue)
)
}
在這種情況下， BlueBox不在同級組中，并且Row由于它具有.所以它在頂部對齊Alignment.Top。
轉載請註明出處，本文鏈接：https://www.uj5u.com/houduan/520773.html
標籤：安卓科特林android-jetpack-compose