我能否使LazyColumn中的一个项目仅占据可用的剩余高度?我试过使用fillParentMaxSize
,但它会使该项与LazyColumn大小相同,因此我无法将另一个项目放在列表顶部,例如我想要随内容一起滚动的标题。
示例代码:
@Composable
fun LazyColumnTest() {
LazyColumn(
modifier = Modifier.fillMaxSize()
) {
item {
Column {
Text(text = "This is a title", style = MaterialTheme.typography.h4)
Text(text = "With a subtitle", style = MaterialTheme.typography.subtitle1)
}
}
item {
OtherLayout(modifier = Modifier.fillParentMaxHeight())
}
}
}
@Composable
fun OtherLayout(modifier: Modifier = Modifier) {
Box(modifier = modifier.fillMaxSize()) {
Icon(
Icons.Default.Close,
contentDescription = null,
modifier = Modifier
.size(150.dp)
.align(Alignment.TopCenter)
)
Button(
onClick = { /*TODO*/ },
modifier = Modifier
.padding(bottom = 16.dp)
.align(Alignment.BottomCenter)
) {
Text(text = "Button at bottom")
}
}
}
这是当前的结果。按钮在屏幕外,所以我需要滚动才能看到它。
![样例](https://i.imgur.com/vbqAytR.png)
更新
在上面的示例中,想法是使用OtherLayout
作为状态。我可以显示items
或者这个带有底部按钮(例如重试按钮)的OtherLayout。
如果我在ScrollView上添加fillViewport="true"
,那么我可以在视图系统上做大致相同的布局。可以在另一个视图上添加gravity="bottom"
,它将保持在屏幕底部。
我会在这里添加一个新的示例,以查看是否能更好地解释。
@Composable
fun LazyColumnTest() {
LazyColumn(
modifier = Modifier.fillMaxSize()
) {
item {
// need to scroll with the content
Header()
}
items(2) { position ->
Text(text = "Item $position")
}
item {
// need to stay at bottom if the items not fill the screen
// and scroll with the content if has a lot of items
Footer(modifier = Modifier)
}
}
}
@Composable
private fun Header() {
Column {
Text(text = "This is a title", style = MaterialTheme.typography.h4)
Text(text = "With a subtitle", style = MaterialTheme.typography.subtitle1)
}
}
@Composable
fun Footer(modifier: Modifier = Modifier) {
Column(modifier = modifier.fillMaxWidth()) {
Text(text = "This is a default footer that cannot be changed")
Button(
onClick = { /*TODO*/ },
modifier = Modifier
.padding(bottom = 16.dp)
) {
Text(text = "With a button")
}
}
}
在这个例子中,我需要页眉和页脚随内容滚动,但如果项目没有填满整个屏幕,页脚会保持在屏幕底部。