jetpack使用BottomNavigation实现底部导航菜单

        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: NavController) {


    BottomNavigation(
        modifier = Modifier,
        backgroundColor = MaterialTheme.colorScheme.secondary
    ) {
        BottomNavigationItem(
            icon = {
                Icon(
                    imageVector = Icons.Default.Home,
                    contentDescription = null
                )
            },
            label = {
                Text("主页")
            },
            selected = true, onClick = {
                navController.navigate("home")
            })
        BottomNavigationItem(
            icon = {
                Icon(
                    imageVector = Icons.Default.Menu,
                    contentDescription = null
                )
            },
            label = {
                Text("扩展")
            },
            selected = true, onClick = {
                navController.navigate("extent")
            })
        BottomNavigationItem(
            icon = {
                Icon(
                    imageVector = Icons.Default.DateRange,
                    contentDescription = null
                )
            },
            label = {
                Text("记录")
            },
            selected = true, onClick = {
                navController.navigate("record")
            })
        BottomNavigationItem(
            icon = {
                Icon(
                    imageVector = Icons.Default.Settings,
                    contentDescription = null
                )
            },
            label = {
                Text("设置")
            },
            selected = true, onClick = {
                navController.navigate("setting")
            })
    }
}


//创建各个页面
@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()
    }
}