Jetpack compose：将元素放置在 Box 内

Question

我的应用程序中有一个Box有一群孩子的：

Box(modifier = Modifier.fillMaxSize()) {
    Text("a")
    Text("b")
}

我希望文本显示为与顶部对齐，距开头的距离为 20%。我该如何实现这一目标？

Answer 1

要解决这个问题，您需要两个部分：

2. 有两种布局Box内容的方法：contentAlignment将为所有子项应用对齐方式，以及Modifier.align可应用于特定子项。

3. 通常您可以Modifier.padding在这种情况下使用，但如果您需要相对大小，则不能使用。获取父级大小的最简单方法是使用Modifier.fillMax..., 修饰符，在这种情况下Modifier.fillMaxWidth(0.2f)可以应用于,与元素一起Spacer放置在 a 中。Row

Box(modifier = Modifier.fillMaxSize()) {
    Row(
        Modifier
            .align(Alignment.TopStart)
    ) {
        Spacer(Modifier.fillMaxWidth(0.2f))
        Text("a")
    }
}