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()
}
}