Jetpack Compose Alignment - 误解alignBy修饰符

Question

我正在研究每个修改器的整个文档。现在我在理解 compose 修饰符时遇到了一些问题。这是 .alignBy 修饰符。框和文本的对齐很清晰。文本按其基线对齐。我可以看到文本的基线在哪里。洋红色框的中间位置与红色文本的基线相同。如果该框更靠近行顶部，则文本会向下滑动。

@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 开发人员的文档和示例没有多大帮助。

@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)
        )
    }
}

谢谢！

Answer 1

来自文档：

在 中Row，所有组件 都alignBy将使用从 中获取的指定HorizontalAlignmentLines值或值垂直对齐alignmentLineBlock，形成同级组。

在你的第二个例子中：

洋红色Box放置在行的顶部，因为它已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)
    )
}

在这种情况下，蓝色Box不在同级组中，并且它在 的顶部对齐，Row因为它有Alignment.Top。