使用权重修饰符在 LazyColumn 中排列单个项目
Arrange a single item inside a LazyColumn by using weight modifier
我希望得到这样的结果。两个分别为 2/3 大小和 1/3 大小的块。
我用这段代码得到了预期的结果。
@Preview(showBackground = true)
@Composable
fun LayoutCheck() {
Column(
modifier = Modifier.fillMaxSize(),
horizontalAlignment = Alignment.CenterHorizontally
) {
Surface(
modifier = Modifier
.width(200.dp)
.weight(3f),
color = MaterialTheme.colors.primary
) {}
Surface(
modifier = Modifier
.width(200.dp)
.weight(1f),
color = MaterialTheme.colors.secondary
) {}
}
}
但是当我把它放在一个惰性列中时,似乎没有任何效果。甚至没有显示。
@Preview(showBackground = true)
@Composable
fun LayoutCheck() {
Box(
modifier = Modifier.fillMaxSize(),
contentAlignment = Alignment.Center
) {
LazyColumn(
modifier = Modifier.fillMaxSize(),
contentPadding = PaddingValues(20.dp)
) {
item {
Column(
modifier = Modifier.fillMaxSize(),
horizontalAlignment = Alignment.CenterHorizontally
) {
Surface(
modifier = Modifier
.width(200.dp)
.weight(3f),
color = MaterialTheme.colors.primary
) {}
Surface(
modifier = Modifier
.width(200.dp)
.weight(1f),
color = MaterialTheme.colors.secondary
) {}
}
}
}
}
}
如果我去掉重量并增加一些高度,它就可以了。但我不想在那里硬编码。那么如何让它与重量一起工作。期待一些帮助..
谢谢
注意:我想要滚动功能,这就是为什么要使用 LazyColumn
真实场景:
登录屏幕,前 2/3 部分有徽标,底部 1/3 部分有文本和按钮
场景 1:完美工作:
场景 2:如果用户字体变大或屏幕旋转,他们将看不到按钮
因为您只有一个项目,所以只需使用带有 verticalScroll 的 Column
:
val scrollState = rememberScrollState()
Column(
modifier = Modifier
.verticalScroll(scrollState),
horizontalAlignment = Alignment.CenterHorizontally,
) {
//...
}
此外,如果您想要 2/3 和 1/3,请在第一个 Surface
中使用 weight(2f)
修饰符。
您可以通过应用 weight
修饰符来防止调整文本大小。相反,我建议您使元素间距灵活,如下所示:
Column(
modifier = Modifier.fillMaxSize(),
horizontalAlignment = Alignment.CenterHorizontally
) {
Spacer(Modifier.weight(1f))
Image(
painter = painterResource(id = R.drawable.my_image),
contentDescription = "",
)
Spacer(Modifier.weight(1.35f))
Text(
"Your app is being reviewed",
)
Spacer(Modifier.weight(0.2f))
Button(onClick = { /*TODO*/ }) {
Text("Log out")
}
Spacer(Modifier.weight(0.2f))
}
垫片说明:
我希望得到这样的结果。两个分别为 2/3 大小和 1/3 大小的块。
我用这段代码得到了预期的结果。
@Preview(showBackground = true)
@Composable
fun LayoutCheck() {
Column(
modifier = Modifier.fillMaxSize(),
horizontalAlignment = Alignment.CenterHorizontally
) {
Surface(
modifier = Modifier
.width(200.dp)
.weight(3f),
color = MaterialTheme.colors.primary
) {}
Surface(
modifier = Modifier
.width(200.dp)
.weight(1f),
color = MaterialTheme.colors.secondary
) {}
}
}
但是当我把它放在一个惰性列中时,似乎没有任何效果。甚至没有显示。
@Preview(showBackground = true)
@Composable
fun LayoutCheck() {
Box(
modifier = Modifier.fillMaxSize(),
contentAlignment = Alignment.Center
) {
LazyColumn(
modifier = Modifier.fillMaxSize(),
contentPadding = PaddingValues(20.dp)
) {
item {
Column(
modifier = Modifier.fillMaxSize(),
horizontalAlignment = Alignment.CenterHorizontally
) {
Surface(
modifier = Modifier
.width(200.dp)
.weight(3f),
color = MaterialTheme.colors.primary
) {}
Surface(
modifier = Modifier
.width(200.dp)
.weight(1f),
color = MaterialTheme.colors.secondary
) {}
}
}
}
}
}
如果我去掉重量并增加一些高度,它就可以了。但我不想在那里硬编码。那么如何让它与重量一起工作。期待一些帮助..
谢谢
注意:我想要滚动功能,这就是为什么要使用 LazyColumn
真实场景: 登录屏幕,前 2/3 部分有徽标,底部 1/3 部分有文本和按钮
场景 1:完美工作:
场景 2:如果用户字体变大或屏幕旋转,他们将看不到按钮
因为您只有一个项目,所以只需使用带有 verticalScroll 的 Column
:
val scrollState = rememberScrollState()
Column(
modifier = Modifier
.verticalScroll(scrollState),
horizontalAlignment = Alignment.CenterHorizontally,
) {
//...
}
此外,如果您想要 2/3 和 1/3,请在第一个 Surface
中使用 weight(2f)
修饰符。
您可以通过应用 weight
修饰符来防止调整文本大小。相反,我建议您使元素间距灵活,如下所示:
Column(
modifier = Modifier.fillMaxSize(),
horizontalAlignment = Alignment.CenterHorizontally
) {
Spacer(Modifier.weight(1f))
Image(
painter = painterResource(id = R.drawable.my_image),
contentDescription = "",
)
Spacer(Modifier.weight(1.35f))
Text(
"Your app is being reviewed",
)
Spacer(Modifier.weight(0.2f))
Button(onClick = { /*TODO*/ }) {
Text("Log out")
}
Spacer(Modifier.weight(0.2f))
}
垫片说明: