Jetpack Compose：约束布局垂直链约束问题

Question

我正在尝试使用 Jetpack Compose ConstraintLayout 构建类似于以下内容的内容。

我想了解如何创建相对于图像的垂直链。当我尝试使用该createVerticalChain()函数时，它会覆盖我给定的约束并将其链接到父级。

这是我当前的代码，如果有帮助的话

@Composable
fun GreetingWithConstraintLayout(name: String) {
    ConstraintLayout(modifier = Modifier.fillMaxSize()) {
        val(ivIcon, tvHello, tvBye) = createRefs()
        createVerticalChain(tvBye, tvHello, chainStyle = ChainStyle.Packed)
        Image(
            painter = painterResource(id = R.drawable.ic_launcher_background),
            contentDescription = null,
            modifier = Modifier
                .size(80.dp)
                .clip(CircleShape)
                .border(1.5.dp, MaterialTheme.colors.primary, CircleShape)
                .constrainAs(ivIcon) {
                    start.linkTo(parent.start)
                    top.linkTo(parent.top)
                }
        )
        Text(
            text = "Hello $name!",
            modifier = Modifier.constrainAs(tvHello) {
                start.linkTo(ivIcon.end, 8.dp)
                top.linkTo(ivIcon.top)
                bottom.linkTo(tvBye.top)
            }
        )
        Text(
            text = "Bye $name!",
            modifier = Modifier.constrainAs(tvBye) {
                start.linkTo(tvHello.start)
                top.linkTo(tvHello.bottom)
                bottom.linkTo(ivIcon.bottom)
            }
        )
    }
}

我在网上找不到与此用例类似的任何示例。我什至不确定这是否可以做到？谢谢你！

Answer 1

尝试约束链条

  val chain = createVerticalChain(tvBye, tvHello, chainStyle = ChainStyle.Packed)
  constrain(chain) {
     top.linkTo(ivIcon.top)
     bottom.linkTo(ivIcon.bottom)
  }