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

Posted 2023-03-17

【中文标题】相对于jetpack中的其他元素创建垂直链组成ConstraintLayout？

【英文标题】：Create vertical chain with respect to other element in jetpack compose ConstraintLayout?

【发布时间】：2022-01-07 21:45:30

【问题描述】：

我想用chainStyle链接以图像为中心的标题和描述文本。打包如何在jetpack compose中实现这一点。

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

【参考方案1】：

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

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")
                    
                
            
        
    

【讨论】：

感谢您的回复，但我已经在使用此解决方案，我正在寻找仅使用约束布局的解决方案

【参考方案2】：

createVerticalChain() 对我来说很好，只要记住正确设置constrainAs：

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

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

    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)
            bottom.linkTo(parent.bottom)
        )

    Text("Line 1 goes here",
        modifier = Modifier
            .constrainAs(text1) 
                start.linkTo(box.end)
                end.linkTo(parent.end)
                top.linkTo(parent.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(parent.bottom)
                width = Dimension.fillToConstraints
            
    )