如何使用Jetpack Compose创建重叠UI及布局位置调整方案

你当前的问题核心是修饰符顺序错误以及matchParentSize()的使用限制了布局调整空间。下面是更简洁直观的实现方式，同时解决你无法调整圆形位置的问题：

优化后的代码 #

@Composable
fun DemoLayout(modifier: Modifier = Modifier) {
    Box(
        modifier = modifier
            .padding(10.dp) // 外层统一设置边距，避免内容溢出容器
    ) {
        // 圆角矩形容器
        Box(
            modifier = Modifier
                .fillMaxSize()
                .clip(RoundedCornerShape(8.dp))
                .border(2.dp, Color.Black, RoundedCornerShape(8.dp))
                .background(Color.White) // 添加背景色更贴近线框效果
        )
        // 重叠的圆形组件
        Box(
            modifier = Modifier
                .size(100.dp)
                .clip(CircleShape)
                .border(4.dp, Color.Black, CircleShape)
                .background(Color.White)
                .align(Alignment.BottomEnd) // 先对齐到右下角基准点
                .offset(x = -10.dp, y = 25.dp) // 在基准点基础上偏移位置
        )
    }
}

关键调整说明 #

1. 外层Box统一边距：用外层padding(10.dp)替代原来给矩形Box设置的复杂padding，让布局层级更清晰，同时避免内容超出父容器范围。
2. 替换matchParentSize()：矩形Box改用fillMaxSize()直接占满外层Box空间，matchParentSize()会让子组件强制匹配父组件尺寸，后续的padding会被限制，而fillMaxSize()更灵活。
3. 调整修饰符顺序：圆形组件先调用align(Alignment.BottomEnd)确定基准对齐位置，再用offset进行偏移——修饰符的执行顺序是从后往前，所以必须先对齐再偏移，否则offset会被align覆盖。
4. 灵活调整位置：如果不想用offset，也可以用负padding实现超出效果，比如把offset换成.padding(end = 10.dp, bottom = -25.dp)，负padding会让圆形突破父Box的底部边界，实现重叠。

内容的提问来源于stack exchange，提问作者Olamilekan Akintilebo