我正在关注在 Compose 中使用约束布局的文档,并设置了约束,如下面的代码所示,我已将视图相互链接并链接到父视图,如 android 文档中所示。但是,如下图所示,可组合项并没有像我期望的那样对齐,有人能看到我在这里可能遗漏的东西吗?
@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)
start.linkTo(parent.start)
end.linkTo(parent.end)
})
Text(
text = stringResource(id = R.string.select_wifi),
modifier = Modifier
.wrapContentSize()
.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()
.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)
})
}
}