如果是按照以前老版本xml的方式来实现:底部导航栏、顶部toolbar、悬浮按钮floatingActionButtonPosition,代码会比较多而且很难懂,现在我们来看看使用神奇的compose来实现,效果图:
![](https://i-blog.csdnimg.cn/blog_migrate/5f37af471def6eef5d7da5c2ece9e715.png)
依赖:
implementation 'androidx.compose.material:material:1.2.1'
代码:
@Composable
fun MainPage() {
//当前选择的NavItem
var selectIndex by remember { mutableStateOf(0) }
val navTextList = listOf("主页", "发现", "我的")
//图标
val iconList = listOf(Icons.Default.Home, Icons.Default.Favorite, Icons.Default.AccountBox)
Scaffold(
topBar = {
TopAppBar(
navigationIcon = {
IconButton(
onClick = {}
) {
Icon(Icons.Filled.Menu, null)
}
},
title = {
Text("stars-one的测试应用")
},
actions = {
IconButton(
onClick = {}
) {
Icon(Icons.Filled.Share, null)
}
IconButton(
onClick = {}
) {
Icon(Icons.Filled.Settings, null)
}
},
// backgroundColor = colorResource(id = R.color.purple_700)
)
},
floatingActionButton = {
FloatingActionButton(onClick = { /*TODO*/ }) {
Icon(imageVector = Icons.Default.Add, contentDescription = null)
}
},
bottomBar = {
// BottomNavigation(backgroundColor = colorResource(id = R.color.white)) { // 底部背景颜色
BottomNavigation {
navTextList.forEachIndexed { index, str ->
BottomNavigationItem(
label = { Text(str) },
selected = index == selectIndex,
//选中选项的颜色 (text\icon\波纹)
selectedContentColor = colorResource(id = R.color.white),
//未选中选项的颜色 (text\icon\波纹)
unselectedContentColor = colorResource(id = R.color.black_bottomnav),
// 默认为true,底部的字未选中时是否显示
alwaysShowLabel = false,
onClick = { selectIndex = index },
icon = {
Icon(imageVector = iconList[index], contentDescription = null)
})
}
}
},
//注意此参数,可以实现图中那种被裁剪的效果,前提是上面的cutoutShape也有设置
floatingActionButtonPosition = FabPosition.End
) {
//这里是主界面
//根据底部导航选中的下标改变展示的页面
when (selectIndex) {
0 -> Text("这是首页")
1 -> Text("这是发现")
2 -> Text("这是我的")
}
}
}
是不是很简单,这样就可以了,谢谢观赏
完美的底部导航栏
本人在多个项目中使用,已经修复使用中出现的bug
下载地址为:https://download.csdn.net/download/wy313622821/88225624