Jetpack Compose 約束布局未正確鏈接

Question

我有一列當前有黃色圓圈，我希望此列占據紅色方塊中的空間，以便黃色圓圈在綠色圓圈和最后帶有禮物、突襲和交易的列之間等距分布。 我已將列的開始和結束鏈接到相應的列，並使其寬度填充受限區域，但正如您所看到的，列和黃色圓圈仍在左上角。 誰能看到我做錯了什么？

    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)
            ) {
                //..
            }
        }
    }
}