先上效果图
再上代码块
@ExperimentalMaterialApi
@Composable
@Preview(showBackground = true)
fun IndexBottomNavigation() {
var selectedIndex by remember { //选中的index
mutableStateOf(0)//默认选中第一个
}
BottomNavigation() {
BottomNavigationItem(
selected = selectedIndex == 0, //selectedIndex和当前的index相同则为选中状态
onClick = { selectedIndex = 0 },//将selectedIndex置为当前index
icon = {//图标设置
Icon(
imageVector = Icons.Filled.Home,
contentDescription = ""
)
},
label = {//图标下的文字显示
Text(text = "首页")
},
alwaysShowLabel = selectedIndex == 0//是否显示文字,这里设置为选中时显示文字,否则不显示
)
BottomNavigationItem(
selected = selectedIndex == 1,
onClick = { selectedIndex = 1 },
icon = {
if (selectedIndex == 1){//选中时不展示Badge
Icon(imageVector = Icons.Filled.MobileFriendly, contentDescription = "")
} else{
BadgeBox( //用来展示未读消息数量
badgeContent = {
Text(text = "16")
}
) {
Icon(imageVector = Icons.Filled.MobileFriendly, contentDescription = "")
}
}
},
label = {
Text(text = "通讯录")
},
alwaysShowLabel = selectedIndex == 1
)
BottomNavigationItem(
selected = selectedIndex == 2,
onClick = { selectedIndex = 2 },
icon = {
Icon(imageVector = Icons.Filled.People, contentDescription = "")
},
label = {
Text(text = "我的")
},
alwaysShowLabel = selectedIndex == 2
)
}
}