创建相对于 jetpack 中其他元素的垂直链组成 ConstraintLayout？

Question

我想使用 chainStyle.Packed 将标题和描述文本链接到以图像为中心的位置，如何在 jetpack compose 中实现此目的。

当我使用createVerticalChain()其相对于父容器的创建链时，这不是我想要的，有没有办法实现这一点？

Answer 1

正如 文档中所建议的createVerticalChain()，您可以“使用 constrain 与生成的 VerticalChainReference 来修改此链的顶部和底部约束。”：

ConstraintLayout(modifier = Modifier.fillMaxSize()) {
    val (box, text1, text2) = createRefs()

    val chainRef = createVerticalChain(text1, text2, chainStyle = ChainStyle.Packed)

    constrain(chainRef) {
        top.linkTo(box.top)
        bottom.linkTo(box.bottom)
    }

    Box(modifier = Modifier
        .size(100.dp)
        .padding(16.dp)
        .background(color = Color.Red, shape = RoundedCornerShape(50.dp))
        .constrainAs(box) {
            start.linkTo(parent.start)
            top.linkTo(parent.top)
        }
    )

    Text("Line 1 goes here",
        modifier = Modifier
            .constrainAs(text1) {
                start.linkTo(box.end)
                end.linkTo(parent.end)
                top.linkTo(box.top)
                bottom.linkTo(text2.top)
                width = Dimension.fillToConstraints
            }
    )

    Text("Line 2 goes here",
        modifier = Modifier
            .constrainAs(text2) {
                start.linkTo(box.end)
                end.linkTo(parent.end)
                top.linkTo(text1.bottom)
                bottom.linkTo(box.bottom)
                width = Dimension.fillToConstraints
            }
    )
}

Answer 2

有两种解决方案。第一种方案要求圆圈右侧内容的高度固定，而第二种方案则不固定，而是受约束：

class MainActivity : ComponentActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)

        startActivity(intent)

        setContent {
            Column(modifier = Modifier.fillMaxSize()) {
 
                // First solution

                Row(
                    modifier = Modifier
                        .fillMaxWidth()
                        .wrapContentHeight()
                ) {
                    Box(
                        modifier = Modifier
                            .size(100.dp)
                            .background(color = Color.Red, shape = RoundedCornerShape(50.dp))
                    )

                    Column(
                        modifier = Modifier
                            .height(100.dp)
                            .padding(start = 20.dp), verticalArrangement = Arrangement.Center
                    ) {
                        Text("Line 1 goes here")
                        Text("Line 2 goes here")
                    }
                }

                Spacer(modifier = Modifier
                    .requiredHeight(30.dp)
                    .fillMaxWidth())


                // Second solution

                ConstraintLayout(modifier = Modifier.fillMaxWidth()) {
                    val (left, right) = createRefs()

                    Box(modifier = Modifier
                        .size(100.dp)
                        .background(color = Color.Red, shape = RoundedCornerShape(50.dp))
                        .constrainAs(left) {
                            start.linkTo(parent.start)
                            top.linkTo(parent.top)
                            bottom.linkTo(parent.bottom)
                        })

                    Column(
                        verticalArrangement = Arrangement.Center,
                        modifier = Modifier
                            .padding(start = 20.dp)
                            .constrainAs(right) {
                                start.linkTo(left.end)
                                top.linkTo(left.top)
                                end.linkTo(parent.end)
                                bottom.linkTo(left.bottom)
                                width = Dimension.fillToConstraints
                                height = Dimension.fillToConstraints
                            }) {

                        Text("Line 1 goes here")
                        Text("Line 2 goes here")
                    }
                }
            }
        }
    }
}