Jetpack Compose约束布局中的约束未连接

Question

我正在使用Jetpack Compose中的constrainAs来将wifi选项列表约束到父元素的顶部，然后约束到文本视图的底部。从照片中可以看出，我的列表没有被约束到父元素的顶部或下面的文本视图上，甚至被向上推出屏幕了？

参考一下，'list'是wifi选项列表，'text1'是以"选择您的wifi"开头的文本视图。

@Composable
fun ScanWifiScreen(wifiList: List<WifiOption>, onClick: (WifiOption) -> Unit) {
ConstraintLayout(
    modifier = Modifier
        .fillMaxSize()
        .background(colorResource(id = R.color.background))
) {

    val (list, text1, text2, progressIndicator) = createRefs()

    WifiList(
        wifiOptions = wifiList,
        onClick = onClick,
        modifier = Modifier
            .constrainAs(list) {
                top.linkTo(parent.top, margin = 8.dp)
                bottom.linkTo(text1.top)
                start.linkTo(parent.start)
                end.linkTo(parent.end)
            }
            .background(colorResource(id = R.color.background))
            .fillMaxHeight())

    Text(
        text = stringResource(id = R.string.select_wifi),
        modifier = Modifier
            .wrapContentSize()
            .padding(bottom = 16.dp)
            .constrainAs(text1) {
                bottom.linkTo(text2.top)
                start.linkTo(parent.start)
                end.linkTo(parent.end)
            },
        style = TextStyle(
            fontFamily = FontFamily(Font(R.font.quicksand_regular)),
            fontSize = 20.sp,
            color = colorResource(id = R.color.main_text),
            letterSpacing = 0.22.sp,
            textAlign = TextAlign.Center,
            lineHeight = 32.sp
        )
    )
    Text(
        text = stringResource(id = R.string.cant_see_network),
        modifier = Modifier
            .wrapContentSize()
            .padding(bottom = 32.dp)
            .constrainAs(text2) {
                bottom.linkTo(progressIndicator.top)
                start.linkTo(parent.start)
                end.linkTo(parent.end)
            },
        style = TextStyle(
            fontFamily = FontFamily(Font(R.font.quicksand_regular)),
            fontSize = 16.sp,
            color = colorResource(id = R.color.sub_text),
            letterSpacing = 0.18.sp,
            textAlign = TextAlign.Center,
            lineHeight = 24.sp
        )
    )

    ProgressIndicator2(
        progression = 3,
        modifier = Modifier.constrainAs(progressIndicator) {
            bottom.linkTo(parent.bottom)
            start.linkTo(parent.start)
            end.linkTo(parent.end)
        })
   }
}

- alfietap

---

添加 top.linkTo(parent.top) 使 text1 紧贴屏幕顶部，使用 top.linkTo(text1.bottom) 让 list 位于 text1 下方。 - Justin

这将使得列表在text1上方，我需要在text1下面的列表。 - alfietap

对于 list -- top.linkTo(parent.top)，以及对于 text1 -- top.linkText(link.bottom) - Justin

Answer 1

请从您的列表中删除 .fillMaxHeight() 修饰符，并添加约束条件 height = Dimension.fillToConstraints

 WifiList(
     //....
     modifier = Modifier
            .constrainAs(list) {
                top.linkTo(parent.top, margin = 8.dp)
                bottom.linkTo(text1.top)
                start.linkTo(parent.start)
                end.linkTo(parent.end)
                height = Dimension.fillToConstraints
            }
      )

- Gabriele Mariotti

---

完美运行！ - alfietap

我认为Dimension.fillToConstraints应该是这个属性的默认值...因为它是视图系统中ConstraintLayout的默认行为。 - Renascienza

我真的永远不会理解为什么谷歌让所有事情变得如此复杂和不直观。 - Farid

缺少 height = Dimension.fillToConstraints 是我的问题。谢谢！ - Aerim

@Renascienza 这不是默认值。在视图系统中，您为高度或宽度设置了wrap_content或0dp（Dimension.fillToConstraints），这里的行为与此相同。 - user924