在 Jetpack Compose 上滚动时折叠导航底部栏答案

【问题标题】：Collapse Navigation BottomBar while scrolling on Jetpack Compose在 Jetpack Compose 上滚动时折叠导航底部栏
【发布时间】：2021-05-27 18:12:32
【问题描述】：

我期待在LazyColumn 列表上滚动时实现折叠效果的方法。我一直在检查文档，但没有发现任何相关内容。如何实现？

目前我正在使用 BottomNavigation 设置在我的 Scaffold 中，我可以将内部填充添加到来自脚手架内容 lambda 的屏幕。但我没有找到任何类型的可滚动状态或类似的东西。

【问题讨论】：

标签： android android-jetpack-compose

【解决方案1】：

您可以使用nestedScroll 修饰符。

类似：

val bottomBarHeight = 48.dp
val bottomBarHeightPx = with(LocalDensity.current) { bottomBarHeight.roundToPx().toFloat() }
val bottomBarOffsetHeightPx = remember { mutableStateOf(0f) }


// connection to the nested scroll system and listen to the scroll
// happening inside child LazyColumn
val nestedScrollConnection = remember {
    object : NestedScrollConnection {
        override fun onPreScroll(available: Offset, source: NestedScrollSource): Offset {

            val delta = available.y
            val newOffset = bottomBarOffsetHeightPx.value + delta
            bottomBarOffsetHeightPx.value = newOffset.coerceIn(-bottomBarHeightPx, 0f)

            return Offset.Zero
        }
    }
}

然后将nestedScroll 应用到脚手架：

Scaffold(
    Modifier.nestedScroll(nestedScrollConnection),
    scaffoldState = scaffoldState,
    //..
    bottomBar = {
        BottomAppBar(modifier = Modifier
            .height(bottomBarHeight)
            .offset { IntOffset(x = 0, y = -bottomBarOffsetHeightPx.value.roundToInt()) }) {
            IconButton(
                onClick = {
                    coroutineScope.launch { scaffoldState.drawerState.open() }
                }
            ) {
                Icon(Icons.Filled.Menu, contentDescription = "Localized description")
            }
        }
    },

    content = { innerPadding ->
        LazyColumn(contentPadding = innerPadding) {
            items(count = 100) {
                Box(
                    Modifier
                        .fillMaxWidth()
                        .height(50.dp)
                        .background(colors[it % colors.size])
                )
            }
        }
    }
)

【讨论】：

非常感谢@gabriele-mariotti！有用。哪种方法是实施它的正确方法？ Atm 我的底栏位于 Global/App Scafold 中，例如抽屉等。因此，为了实现这一点，我应该根据哪个屏幕来检查是否包含此内容。我应该在每个屏幕上单独包含 BottomBar 并在需要时添加此案例，还是“Compose-Thinking”最好将其保留在上层？
我会使用导航方法。使用上层的 Scaffold，只在需要的地方包含 BottomBar。比如：stackoverflow.com/questions/67575664/…
那就试试这个方法吧！但是，它是否有一些乱七八糟的代码潜力开始为这些情况设置多个if 条件？只是问一下，我不习惯在撰写中思考。我有点害怕这会导致未来的重构。如果我想在某些屏幕上实现折叠效果，而在其他屏幕上不需要折叠效果，我最终需要为显示底栏的路线创建一个if ，添加scrollConnection modifier 并修改InnerPadding 修饰符以获得额外的填充在底部。非常感谢您的回答！
我尝试了 TopAppBar，问题是 topAppBar 确实按预期折叠，但在其位置留下了一个空白，是否为 topAppBars 推荐了不同的方法？