Jetpack Compose：如何使用精确的 (x,y) 坐标将 UI 元素定位在其父级中？

Question

根据有关自定义布局的文档：“每个 UI 元素都有一个父元素，并且可能有多个子元素。每个元素也位于其父元素内，指定为 (x, y) 位置和大小，指定为宽度和高度。”

假设我在盒子里有一个按钮。如何指定该框中按钮的确切 X 和 Y 位置？

Answer 1

默认情况下，

Box

具有

TopStart

对齐方式，与android坐标空间起点相同。要从该点移动，您可以使用

offset

修饰符：

Box {
    Button(
        onClick = { /*TODO*/ },
        modifier = Modifier
            .offset(x = 100.dp, y = 100.dp)
    ) {

    }
}

Answer 2

对于自定义布局，情况有点不同。您可以在布局代码实验室中阅读所有相关内容 - https://developer.android.com/codelabs/jetpack-compose-layouts#6

这讲述了如何手动设计柱子。

示例，将元素置于给定约束的中心。

Layout(
        content = {
            Button(onClick = { /*TODO*/ }) {
                Text("Lorem Ipsum")
            }
        }
    ){measurables, constraints ->
        //Measuring the First (and only) item with the given constraints and storing the resulting placeable
        val placeable = measurables[0].measure(constraints)
        layout(constraints.maxWidth, constraints.maxHeight){ // Size of the Layout, can be anything you want, even a number
            placeable.place(constraints.maxWidth / 2, constraints.maxHeight / 2) // Placing at net half the distance
            //You can also specify the x, y above. That is what it is for.
        }
    }

仅此而已

Answer 3

modifier = Modifier.layout { measurable, constraints ->
                        val placeable = measurable.measure(constraints)
                        layout(placeable.width, placeable.height) {
                           //  placeable.placeRelative(x.roundToPx(), y.roundToPx())
                            placeable.place(IntOffset(it.offset.x.roundToInt(), it.offset.y.roundToInt()))
                        }
                    }

Answer 4

您可以使用

BiasAlignment

将其相对于父布局定位。例如，如果您想将其置于第三象限中心

@Preview
@Composable
fun RelativeToParent() {
    Box(
        modifier = Modifier
            .size(200.dp)
            .background(
                color = Color.Blue
            )
    ){
        Box(
            modifier = Modifier
                .size(20.dp)
                .background(
                    color = Color.Yellow
                ).align(
                    BiasAlignment(-0.5f, 0.5f)
                )
        )
    }
}