Jetpack Compose 约束布局未正确链接

Question

我有一列当前有黄色圆圈，我希望此列占据红色方块中的空间，以便黄色圆圈在绿色圆圈和最后带有礼物的列之间等距，raid和贸易。我已将列的开始和结束链接到相应的列，并使其宽度填充受限区域，但正如您所看到的，列和黄色圆圈仍在左上角。谁能看出我做错了什么？

    ConstraintLayout {

    val (card, columnStart, columnMiddle, columnEnd) = createRefs()

    Card(
        modifier = Modifier
            .height(180.dp)
            .fillMaxWidth()
            .padding(horizontal = 16.dp, vertical = 8.dp)
            .constrainAs(card) {}
    ) {

        Column(
            modifier = Modifier
                .fillMaxHeight()
                .width(120.dp)
                .wrapContentWidth(Alignment.Start)
                .constrainAs(columnStart) {
                    top.linkTo(card.top)
                    bottom.linkTo(card.bottom)
                },
            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

                .constrainAs(columnMiddle) {
                    top.linkTo(card.top)
                    bottom.linkTo(card.bottom)
                    start.linkTo(columnStart.end)
                    end.linkTo(columnEnd.start)
                    width = Dimension.fillToConstraints
                }
        ) {

            Box(modifier = Modifier.wrapContentSize()) {
                PokeRepYellowBackground()
            }

        }

        Column(
            modifier = Modifier
                .padding(end = 4.dp)
                .wrapContentHeight()
                .wrapContentWidth(Alignment.End)
                .constrainAs(columnEnd) {
                    top.linkTo(card.top)
                    bottom.linkTo(card.bottom)
                    end.linkTo(card.end)
                },
            horizontalAlignment = Alignment.CenterHorizontally,
            verticalArrangement = Arrangement.spacedBy(8.dp)
        )

Answer 1

您可以使用以下内容：

ConstraintLayout {

    val (card, columnStart, columnMiddle, columnEnd) = createRefs()

    Card( //..
          Modifier.constrainAs(card) {}
    ) {

        ConstraintLayout {
            Column(
                modifier = Modifier
                    .constrainAs(columnStart) {
                      //...
                    },
                horizontalAlignment = Alignment.CenterHorizontally
            ) {
                //..
            }

            Column(
                modifier = Modifier
                    .constrainAs(columnMiddle) {
                        top.linkTo(card.top)
                        bottom.linkTo(card.bottom)
                        start.linkTo(columnStart.end)
                        end.linkTo(columnEnd.start)
                        width = Dimension.fillToConstraints
                    },
                horizontalAlignment = Alignment.CenterHorizontally
            ) {
                //..
            }

            Column(
                modifier = Modifier
                    //..
                    .constrainAs(columnEnd) {
                        top.linkTo(parent.top)
                        bottom.linkTo(parent.bottom)
                        end.linkTo(parent.end)
                    },
                horizontalAlignment = Alignment.CenterHorizontally,
                verticalArrangement = Arrangement.spacedBy(8.dp)
            ) {
                //..
            }
        }
    }
}