Jetpack Compose：ConstraintLayout垂直链约束（以图片为参照）问题

你的问题出在调用createVerticalChain()时，它会自动为链内组件设置与父布局的top/bottom约束，覆盖了你原本给文本设置的和图片关联的垂直约束，导致链以父布局为基准。

要实现以图片为参照的垂直链，正确的做法是把垂直链作为一个整体，与图片建立约束关系，而非给链内单个文本分别绑定图片的垂直约束。修改后的代码如下：

@Composable
fun GreetingWithConstraintLayout(name: String) {
    ConstraintLayout(modifier = Modifier.fillMaxSize()) {
        val(ivIcon, tvHello, tvBye) = createRefs()
        // 创建垂直链，按从上到下的顺序传入组件，Packed风格让文本紧凑排列
        val textChain = createVerticalChain(tvHello, tvBye, chainStyle = ChainStyle.Packed)
        
        Image(
            painter = painterResource(id = R.drawable.ic_launcher_background),
            contentDescription = null,
            modifier = Modifier
                .size(80.dp)
                .clip(CircleShape)
                .border(1.5.dp, MaterialTheme.colors.primary, CircleShape)
                .constrainAs(ivIcon) {
                    start.linkTo(parent.start)
                    top.linkTo(parent.top)
                }
        )
        Text(
            text = "Hello $name!",
            modifier = Modifier.constrainAs(tvHello) {
                start.linkTo(ivIcon.end, 8.dp)
                // 移除原有的top/bottom约束，交由链统一管理
            }
        )
        Text(
            text = "Bye $name!",
            modifier = Modifier.constrainAs(tvBye) {
                start.linkTo(tvHello.start)
                // 移除原有的top/bottom约束，交由链统一管理
            }
        )
        
        // 将整个链与图片的垂直边界绑定，让链以图片为参照
        constrain(textChain) {
            top.linkTo(ivIcon.top)
            bottom.linkTo(ivIcon.bottom)
            // 可选：设置垂直偏移，让链在图片垂直范围内居中
            verticalBias = 0.5f
        }
    }
}

关键说明： #

• 创建链时，组件顺序需匹配你想要的垂直排列（tvHello在前对应上方，tvBye在后对应下方）。
• 通过constrain(textChain)把链的整体与图片的top、bottom绑定，确保链的垂直范围以图片为基准，而非父布局。
• 移除链内单个文本与图片的垂直约束，避免和链的约束产生冲突。

这样就能实现你想要的效果：两个文本组成的垂直链，水平方向在图片右侧排列，垂直方向以图片的边界为参照。

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