Jetpack Compose Constraint 布局约束不链接

2024-03-24

我将 constrainAs 与 Jetpack Compose 结合使用,将 wifi 选项列表限制到父级的顶部,然后限制到文本视图的底部。从照片中可以看出,我的列表并没有被限制在父级的顶部或其下面的文本视图上,它甚至被向上推离屏幕?

作为参考,“list”是 wifi 选项列表,“text1”是以“Select your 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)
        })
   }
}

在您的列表中删除.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
            }
      )
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

Jetpack Compose Constraint 布局约束不链接 的相关文章

随机推荐