Jetpack Compose实现底部导航栏目

    Scaffold(
        topBar = {
            TopTitleBar(scope = scope, drawerState = drawerState,scrollBehavior = scrollBehavior)
        },
        bottomBar = {
            BottomNaviBarHost(navController = naviController)
        },
        //
        snackbarHost = {
            SnackbarHost(hostState = snackBarState)
        },
        //悬浮按钮
        floatingActionButton = {
            FloatingAction(scope = scope, snackBarState = snackBarState)
        }
    ) { innerPadding ->
        //这个是自定义的页面配合自定义的底部导航栏使用:CustomBottomNavigationBar
        //这个navHost容器是配合BottomNaviBarHost使用的，可以当作代码模板
        NavHost(
            navController = naviController,
            startDestination = BottomNaviScreen.HomeScreen.route,
            modifier = Modifier.padding(innerPadding),
        ) {
            composable(BottomNaviScreen.HomeScreen.route) { HomeScreen(naviController) }
            composable(BottomNaviScreen.ExtendScreen.route) { ExtendScreen(naviController) }
            composable(BottomNaviScreen.RecordScreen.route) { RecordScreen(naviController) }
            composable(BottomNaviScreen.SettingScreen.route) { SettingScreen(naviController) }
        }
    }

}

…

//参考官方文档编写，compose中习惯把页面叫screen,而在Flutter中习惯叫page,因此在代码中screen和page的含义相同
sealed class BottomNaviScreen(val route:String, val resourceId:Int,val icon:ImageVector) {
   

    object HomeScreen : BottomNaviScreen("home",R.string.navi_home,Icons.Default.Home)
    object ExtendScreen : BottomNaviScreen("extent", R.string.navi_extend,Icons.Default.Menu)
    object RecordScreen : BottomNaviScreen("record", R.string.navi_record,Icons.Default.DateRange)
    object SettingScreen: BottomNaviScreen("setting"