如何在Jetpack Compose中使LazyColumn的子项占据剩余的高度

Question

如何在Jetpack Compose中使LazyColumn的子项占据剩余的高度

androidandroid-jetpack-composeandroid-jetpack-compose-list

5

我能否使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或者这个带有底部按钮（例如重试按钮）的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")
        }
    }
}

在这个例子中，我需要页眉和页脚随内容滚动，但如果项目没有填满整个屏幕，页脚会保持在屏幕底部。

sample2

- Fillipe Duoli

您可以将按钮移动到LazyColumn之外。类似于：https://dev59.com/VXkPtIcB2Jgan1znoq01#73636819 - Gabriele Mariotti

我更新了示例代码，试图使其更加清晰明了。 - Fillipe Duoli

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Gabriele Mariotti · Accepted Answer

使用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()) {
        //..
    }
}