Jetpack Compose ConstraintLayout约束链接异常 中间列无法占满指定区域

问题原因 #

你出现这个问题是两个核心错误导致的：

• 布局层级逻辑错误：你将三个功能Column放在了Card组件内部，但是你声明的createRefs、约束规则都属于外层的ConstraintLayout。外层ConstraintLayout的约束仅对它的直接子组件（也就是你代码里的Card）生效，完全管不到Card内部的子控件，你给三个Column加的constrainAs规则全部无效。
• 中间Column缺少内容对齐配置：就算约束生效，你当前写的columnMiddle没有设置内容对齐属性，就算Column占满了中间区域，内部的黄色圆圈默认也会排在左上角，不会居中显示。

修复方案 #

把ConstraintLayout移到Card的内部，让三个功能Column成为ConstraintLayout的直接子组件，再给中间Column加上内容居中的配置即可，修复后代码如下：

Card(
    modifier = Modifier
        .height(180.dp)
        .fillMaxWidth()
        .padding(horizontal = 16.dp, vertical = 8.dp)
) {
    // 把ConstraintLayout放到Card内部，作为Card的根布局
    ConstraintLayout(modifier = Modifier.fillMaxSize()) {
        val (columnStart, columnMiddle, columnEnd) = createRefs()

        Column(
            modifier = Modifier
                .fillMaxHeight()
                .width(120.dp)
                .constrainAs(columnStart) {
                    top.linkTo(parent.top)
                    bottom.linkTo(parent.bottom)
                    start.linkTo(parent.start)
                },
            horizontalAlignment = Alignment.CenterHorizontally
        ) {
            Image(
                modifier = Modifier
                    .size(120.dp)
                    .padding(top = 4.dp, start = 4.dp)
                    .clip(CircleShape),
                painter = painterResource(R.drawable.pokepals_logo),
                contentDescription = null
            )
            Text(
                text = profile.trainerName,
                style = MaterialTheme.typography.subtitle1
            )
        }

        Column(
            modifier = Modifier
                // 给中间Column加上内容居中配置
                .horizontalAlignment(Alignment.CenterHorizontally)
                .verticalArrangement(Arrangement.Center)
                .constrainAs(columnMiddle) {
                    top.linkTo(parent.top)
                    bottom.linkTo(parent.bottom)
                    start.linkTo(columnStart.end)
                    end.linkTo(columnEnd.start)
                    width = Dimension.fillToConstraints
                }
        ) {
            Box(modifier = Modifier.wrapContentSize()) {
                PokeRepYellowBackground()
            }
        }

        Column(
            modifier = Modifier
                .padding(end = 4.dp)
                .constrainAs(columnEnd) {
                    top.linkTo(parent.top)
                    bottom.linkTo(parent.bottom)
                    end.linkTo(parent.end)
                },
            horizontalAlignment = Alignment.CenterHorizontally,
            verticalArrangement = Arrangement.spacedBy(8.dp)
        ) {
            // 右侧gifts、raid、trade功能控件
        }
    }
}

效果示意 #

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