目录
1.声明导航栏数据源
主要声明导航栏label和图标数组，这里使用的是本地数据，也可以使用网络数据。
//导航label数组
private val labels = arrayOf("首页", "房讯", "消息", "我的")
//导航默认图标集合
private val defImages =
arrayOf(R.mipmap.img_index, R.mipmap.img_info, R.mipmap.img_message, R.mipmap.img_preson)
//导航选中图标集合
private var selectImages =
arrayOf(
R.mipmap.img_index_select,
R.mipmap.img_info_select,
R.mipmap.img_message_select,
R.mipmap.img_preson_select
)
//导航选中索引
private var selectIndex by mutableStateOf(0)
2.使用Scaffold搭建页面结构
Compose给我们提供了Scaffold脚手架，实现了Material设计的页面基本结构。包括标题栏、底部栏、SnackBar（类似吐司功能）、浮动按钮、抽屉组件、剩余内容布局等，让我们可以快速定义一个基本的页面结构。
setContent {
val navController = rememberNavController()
Scaffold(
//设置底部导航栏
bottomBar = {
BuildBottomBar(labels = labels, navController)
},
) {
//设置页面主内容区域，这里通过NavHost，根据选中不同的导航栏Tab导航到不同的页面。
NavHost(navController = navController, startDestination = labels[selectIndex]) {
composable(labels[0]) {
//首页Compose
IndexPage()
}
composable(labels[1]) {
//咨询Compose
InfoPage()
}
composable(labels[2]) {
//消息Compose
MessagePage()
}
composable(labels[3]) {
//个人中心Compose
PersonPage()
}
}
}
}
3.BottomNavigation的用法
BottomNavigation中的content可以添加多个BottomNavigationItem，用来构建导航栏的样式，BottomNavigationItem中可以设置icon和label，选中颜色和未选中颜色等等一些常用的属性。可以给item设置点击事件onClick等。
BottomNavigation(backgroundColor = Color.White, elevation = 6.dp) {
for (i in labels.indices) {
BottomNavigationItem(selected = selectIndex == i, onClick = {
selectIndex = i
navController.navigate(labels[i])
}, icon = {
Image(
painter = painterResource(id = if (selectIndex == i) selectImages[i] else defImages[i]),
contentDescription = labels[i],
modifier = Modifier.size(25.dp)
)
}, label = {
Text(text = labels[i], color = if (selectIndex == i) Color.Red else Color.Gray)
})
}
}
这里用了一个循环来添加BottomNavigationItem，通过selectIndex来判断tab是否选中。在点击事件中设置选中的索引。 这里要注意的是在Compose中导航主要是用NavHostController来进行控制。 需要引入单独的依赖库
通常这个实例是用rememberNavController()来获取。
val navController = rememberNavController()
可以通过navigate方法来进行导航到具体也面，naviget传人的参数和NavHost中的startDestination参数一致，这样就可以跳转到指定页面中
navController.navigate(labels[i])
