如何使 LazyColumn 项目占据 Jetpack Compose 上的剩余高度

Question

我可以让 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")
        }
    }
}

这是当前的结果。该按钮位于屏幕之外，因此我需要滚动才能看到它。

---

更新

OtherLayout在上面的例子中，我们的想法是像状态一样使用它。我可以显示items底部有一个按钮的其他布局，例如重试按钮。fillViewport="true"如果我添加 ScrollView，我可以在视图系统上执行相同的布局。可以gravity="bottom"在另一个视图上添加 ，它将保留在屏幕底部。

我将在此处添加一个带有页眉/页脚布局的新示例，看看是否可以更好地解释。

@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")
        }
    }
}

在此示例中，我需要页眉和页脚随内容一起滚动，但如果项目没有填满整个屏幕，则页脚保留在屏幕底部。

Answer 1

使用该item函数，您可以将另一个项目添加到 的可滚动内容中LazyColumn。

如果您希望LazyColumn只占据剩余的可用高度，并且页脚不随列表滚动，则可以将页脚移出LazyColumn并将weight修改器应用到LazyColumn。

就像是：

Column(){
    Header()

    LazyColumn(Modifier.weight(1f)) {
        //....
    }

    Footer() //your Box
}

在你的情况下：

Column {

    //Header
    Box(Modifier.fillMaxWidth().height(30.dp).background(Red))

    LazyColumn(Modifier.weight(1f)) {
        items(itemsList){
            Text("Item $it")
        }
    }

    //Footer
    OtherLayout()
}

和：

@Composable
fun OtherLayout(modifier: Modifier = Modifier) {
    Box(modifier = modifier.fillMaxWidth()) {
        //..
    }
}