如何在jetpack compose中向下滚动时隐藏底部导航栏并在向上滚动时显示它？

Question

我正在创建一个带有底部导航栏的简单应用程序。我想在向下滚动时隐藏底部导航栏，并在可组合屏幕中向上滚动时显示它。

如有任何帮助，我们将不胜感激。如果您需要更多代码，请告诉我。我已附上我认为与此问题相关的所有代码。

这是我的底部导航栏。

@Composable
fun BottomBar(navController: NavController) {

    val items = listOf(
        NavigationItem.Home,
        NavigationItem.Search
    )

    BottomNavigation(
        backgroundColor = MaterialTheme.colors.DarkRed,
        contentColor = Color.White
    ) {

        val navBackStackEntry by navController.currentBackStackEntryAsState()
        val currentRoute = navBackStackEntry?.destination?.route

        items.forEach { item ->
            BottomNavigationItem(
                selected = currentRoute == item.route,
                icon = {
                    Icon(
                        imageVector = item.icon,
                        contentDescription = "Icon",
                        modifier = Modifier.size(28.dp)

                    )
                },
                alwaysShowLabel = false,
                selectedContentColor = Color.White,
                unselectedContentColor = Color.White.copy(0.4f),
                onClick = {
                    navController.navigate(item.route){
                        // Pop up to the start destination of the graph to
                        // avoid building up a large stack of destinations
                        // on the back stack as users select items
                        navController.graph.startDestinationRoute?.let{route ->
                            popUpTo(route){
                                saveState = true
                            }
                        }
                        // Avoid multiple copies of the same destination when
                        // reselecting the same item
                        launchSingleTop = true
                        // Restore state when reselecting a previously selected item
                        restoreState = true
                    }

                }
            )
        }
    }
}

这是我的主屏幕

@Composable
fun MainScreen(){

    val navController = rememberNavController()

    Scaffold(topBar = {
        ActionBar("Books")
    },
        bottomBar = {
            BottomBar(navController)
        }){

        NavigationGraph(navController = navController)
    }
}

还有这个导航图

@Composable
fun NavigationGraph(navController: NavHostController){

    NavHost(navController = navController, startDestination = NavigationItem.Home.route ){

        composable(NavigationItem.Home.route){
            HomeScreen()
        }
        composable(NavigationItem.Search.route){
            SearchScreen()
        }
    }
}

Answer 1

您可以使用

LazyListState

来跟踪列表的状态，并且仅在滚动状态索引初始时显示

BottomBar

。这可以通过以下方式完成：

对于惰性列：

@Composable
fun HomeScreen(scrollState: LazyListState) {

    LazyColumn(
        state = scrollState,
    ) {
        ...
      }
}

对于导航图：

@Composable
fun NavigationGraph(navController: NavHostController, scrollState: LazyListState){

    NavHost(navController = navController, startDestination = NavigationItem.Home.route ){

        composable(NavigationItem.Home.route){
            HomeScreen(scrollState = scrollState)
        }
        composable(NavigationItem.Search.route){
            SearchScreen()
        }
    }
}

在主屏幕中：

@Composable
fun MainScreen(){

    val navController = rememberNavController()
    val scrollState = rememberLazyListState()

    Scaffold(topBar = {
        ActionBar("Books")
    },
        bottomBar = {
         if(scrollState.firstVisibleItemIndex == 0){ 
                  BottomBar(navController) 
           }
           
        }){

        NavigationGraph(navController = navController, scrollState = scrollState)
    }
}

这样，

BottomBar

仅在列表位于顶部时才会显示。

Answer 2

使用 Gautam Hazarika 的答案，你可以这样做以获得更好的性能。

val shouldHideBottomBar by remember(scrollState) {
 derivedStateOf { scrollState.firstVisibleItemIndex == 0 
}  
Scaffold ( 
          ... 
          bottomBar = { 
                       AnimatedVisibility(shouldHideBottomBar) {
                        HomeBottomNavigation(bottomTab, setCurrentBottomTab)
                    }
                }, 
) 
{ ... }