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",R.string.navi_setting,Icons.Default.Settings)
}


@Composable
fun BottomNaviBarHost(navController = naviController) {
	    val screens = listOf(
        BottomNaviScreen.HomeScreen,
        BottomNaviScreen.ExtendScreen,
        BottomNaviScreen.RecordScreen,
        BottomNaviScreen.SettingScreen,
    )
	
    NavigationBar(
        containerColor = Color.LightGray,
        contentColor = Color.Green, //这个颜色不起作用
    ) {
        val navBackStackEntry by navController.currentBackStackEntryAsState()
        val currentDestination = navBackStackEntry?.destination

        screens.forEach { item ->
            NavigationBarItem(
                icon = { Icon(imageVector = item.icon, contentDescription = null)},
                label = { Text(text = stringResource(id = item.resourceId))},
                selected = currentDestination?.hierarchy?.any{it.route == item.route} == true,
                onClick = {
                    navController.navigate(item.route) {
                        //popup to the start destination of the graph to avoid building up a large
                        //stack of destinations on the back stack as users select items.
                        popUpTo(navController.graph.startDestinationId) {
                            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
                    }
                },
                //设置bar的各种颜色
                colors = NavigationBarItemDefaults.colors(
                    selectedIconColor = Color.Cyan,
                    selectedTextColor = Color.Cyan,
                    //这个颜色最好和NavigationBar的containerColor颜色保持一致，不然会在Icon外层显示一个背景颜色
                    indicatorColor = Color.Blue,
                    unselectedIconColor = Color.Yellow,
                    unselectedTextColor = Color.Yellow,
                ),
            )
        }
    }
    }

//创建各个页面
@Composable
fun HomeScreen(navController: NavController) {
    Column(
        modifier = Modifier.fillMaxSize(),
        verticalArrangement = Arrangement.Center,
        horizontalAlignment = Alignment.CenterHorizontally
    ) {
        Text(text = "首页")
        Button(onClick = {
            navController.navigate(BottomNaviScreen.ExtendScreen.route)
        }) {
            Text(text = "Go to Person Screen")
        }
    }
}

//扩展页面
@Composable
fun ExtendScreen(navController: NavController) {
    Column(
        modifier = Modifier.fillMaxSize(),
        verticalArrangement = Arrangement.Center,
        horizontalAlignment = Alignment.CenterHorizontally
    ) {
        Text(text = "扩展")
        Button(onClick = {
            navController.navigate(BottomNaviScreen.RecordScreen.route)
        }) {
            Text(text = "Go to Person Screen")
        }
    }
}

//记录页面
@Composable
fun RecordScreen(navController: NavController) {
    Column(
        modifier = Modifier.fillMaxSize(),
        verticalArrangement = Arrangement.Center,
        horizontalAlignment = Alignment.CenterHorizontally
    ) {
        Text(text = "记录")
        Button(onClick = {
            navController.navigate(BottomNaviScreen.SettingScreen.route)
        }) {
            Text(text = "Go to Person Screen")
        }
    }
}

//设置页面
@Composable
fun SettingScreen(navController: NavController) {
    Column(
        modifier = Modifier.fillMaxSize(),
        verticalArrangement = Arrangement.Center,
        horizontalAlignment = Alignment.CenterHorizontally
    ) {
        //主页内容
        ScrollContent()
    }
}