Jetpack compose：在 Box 中定位元素

Question

我的应用程序中有一个 Box 和一堆 children:

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

我希望文本显示为与顶部对齐，距起始位置 20%。我该如何实现？

Answer 1

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

有两种布局 Box 内容的方法：contentAlignment 将对所有 children 和 Modifier.align 应用对齐方式，这可以申请特定的 child.
通常您可以在这种情况下使用 Modifier.padding，但如果您需要相对大小则不行。取 parent 大小的一部分最简单的方法是使用 Modifier.fillMax... 修饰符，在这种情况下 Modifier.fillMaxWidth(0.2f) 可以应用于 Spacer，放在 Row 中用你的元素。

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

Answer 2

使用 offset/absoluteOffset 修饰符和 BoxWithConstraints。

Jetpack compose：在 Box 中定位元素

Jetpack compose: position elements inside a Box

android

android-layout

android-jetpack-compose