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

   ，与元素一起放置在

   Row

   中。

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

Answer 2

将

offset

/

absoluteOffset

修饰符与

BoxWithConstraints

一起使用。

Answer 3

跟随狼的回答

我找到了这个解决方案。

让我们检查一下这段代码和下面的蓝色框。

@Composable
fun BoxExample() {
    BoxWithConstraints {
        val boxWithConstraintsScope = this
        val yOffset = 0.2 * boxWithConstraintsScope.maxHeight.value

        Box(
            modifier = Modifier
                .fillMaxSize()
        ) {

            Box(
                modifier = Modifier
                    .height(300.dp)
                    .width(300.dp)
                    .background(Color.Red)

            )
            Box(
                modifier = Modifier
                    .height(200.dp)
                    .width(200.dp)
                    .background(Color.Green)
            )
            Box(
                modifier = Modifier
                    .offset(y =  yOffset.dp)
                    .height(100.dp)
                    .width(100.dp)
                    .background(Color.Blue)
            )
        }
    }
}