Jetpack Compose ConstraintLayout：为何MedicineDetails卡片未按约束显示在nameRow下方？

你的约束设置未生效，核心问题出在nameRow的布局配置上：

你给nameRow添加了padding(top = 64.dp)，同时将它的顶部约束绑定到parent.top。在Compose的ConstraintLayout中，约束是基于组件自身的布局边界计算的——这里的padding(top=64.dp)只是让nameRow内部的内容向下偏移了64dp，但nameRow自身的顶部依然是父组件的顶部，它的bottom位置也只是自身内容的底部（没有包含top padding的高度）。所以MedicineDetails被绑定到nameRow.bottom后，会被定位到父组件顶部附近，自然就和nameRow的内容重叠了。

修复步骤 #

1. 把nameRow的顶部约束从parent.top改为topBar.bottom，让它自动在顶部导航栏下方布局，不需要手动添加top padding。
2. 移除nameRow的padding(top = 64.dp)，避免内容偏移导致布局逻辑混乱。

修改后的完整代码：

@Composable
fun AddMedicine() {
    Surface(modifier = Modifier.fillMaxSize()) {
        ConstraintLayout(modifier = Modifier.fillMaxSize()) {
            val (nameRow, list, card, topBar) = createRefs()
            Image(painter = painterResource(id = R.drawable.ic_topbar), contentDescription = null,
                modifier = Modifier.constrainAs(topBar) {
                    top.linkTo(parent.top)
                    start.linkTo(parent.start)
                    end.linkTo(parent.end)
                })

            Box(modifier = Modifier
                .fillMaxWidth()
                .padding(start = 16.dp, end = 16.dp)
                .constrainAs(nameRow) {
                    top.linkTo(topBar.bottom)
                    start.linkTo(parent.start)
                    end.linkTo(parent.end)
                }) {
                Text(
                    text = "Add Medicine",
                    fontSize = 20.sp,
                    fontWeight = FontWeight.Bold,
                    color = Color.White,
                    modifier = Modifier
                        .padding(16.dp)
                        .align(Alignment.Center)
                )
                Image(
                    painter = painterResource(id = R.drawable.ic_back),
                    contentDescription = null,
                    modifier = Modifier.align(Alignment.TopStart)
                )
            }

            MedicineDetails(
                modifier = Modifier
                    .constrainAs(card) {
                        top.linkTo(nameRow.bottom)
                        start.linkTo(parent.start)
                        end.linkTo(parent.end)
                    }
            )
        }
    }
}

额外提示 #

如果你的顶部导航栏topBar没有明确的高度，可以给它添加height(IntrinsicSize.Min)或者指定固定高度（比如height(64.dp)），确保约束的位置计算更准确。

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