compose LazyColumn 裁剪底部的内容答案

【问题标题】：compose LazyColumn crops the content at the bottomcompose LazyColumn 裁剪底部的内容
【发布时间】：2022-12-21 06:06:04
【问题描述】：

我有可组合的空片段：

setContent {
    Surface(
        modifier = Modifier
            .fillMaxWidth().fillMaxHeight().padding(bottom = 48.dp, top = 16.dp),
        color = colorResource(id = R.color.usaa_white)
    ) {
        val itemsList = (0..50).toList()
        val itemsIndexedList = listOf("A", "B", "C")
        LazyColumn(
        ) {
            items(itemsList.size) {
                Text("Item is $it")
            }
            item {
                Text("Single item")
            }
            itemsIndexed(itemsIndexedList) { index, item ->
                Text("Item at index $index is $item")
            }
        }
    }
}

问题是：我只能滚动内容直到“单个项目”行，其余内容被隐藏。我添加了一些填充以确保它不是 bottomNavBar 覆盖列表但它仍然被裁剪。

【问题讨论】：

您使用的是什么 Compose 版本，以及您能够重现它的 Android 版本是什么？您的示例代码在1.1.0-rc03API 31 模拟器对我来说——我可以滚动浏览所有项目，如here 所示
您应该在 LazyColumn 上使用 contentPadding 而不是将填充应用于其容器。
@PhilipDukhov 撰写版本是 1.0.0 我也有 bottomNavBar 但正如我提到的我已经添加了填充以确保它不覆盖内容。好奇 bottomNavBar 是否仍然会导致 LazyLayout 的高度计算错误
@Rainmaker 所以这真的是 minimal reproducible example，您是否尝试运行这个确切的代码并重现了问题，或者您在某处也有 bottomNavBar？或者你说的是一个系统？
同样的问题在这里。我有一个工具栏、bottomBar 和 FragmentContainerView，它们在顶部到 TB 和底部到 BB 的中心约束中托管导航图，当我删除 TB 和 BB 时，LazyColumn 运行良好，一旦我添加其中一个，最后的项目就会被裁剪。我用 column+verticalScroll 对其进行了测试，它在没有任何裁剪的情况下工作正常。

标签： android android-jetpack-compose lazycolumn

【解决方案1】：

看起来问题是由 bottomNavBar 引起的。有趣的是，它只发生在 LazyColumn 上，当我使用 Column 时工作正常我找到的修复方法是将 contentPadding 添加到底部。（但希望找到更好的解决方案）

LazyColumn(contentPadding = PaddingValues(bottom = 70.dp)) { }

【讨论】：

这是一种解决方法，您是否弄清楚原始问题是什么？

【解决方案2】：

使用Scaffold（检查documentation）。

脚手架有一个通用的内容尾随 lambda 槽。 lambda 接收一个 PaddingValues 实例，该实例应应用于内容根——例如，通过 Modifier.padding——以抵消顶部和底部条（如果存在）。
setContent {
    Scaffold { contentPadding ->
        Box(
            modifier = Modifier.padding(contentPadding)
        ) {
            // Your code
        }
    }
}
希望能帮助到你！

【讨论】：