我正在尝试创建一个自定义的底部导航栏,它看起来类似于Windows 7的底部应用程序栏或任务栏。类似于导航轨道的东西,但它是水平的。
所有的底部导航项目应该从开始和他们之间的间距应该像说16.dp配置
附加图像我试图实现
我尝试创建一个自定义的RowScope
并将其附加到BottomBar
,但它不工作
@Composable
fun CustomRowScope(
modifier: Modifier = Modifier,
content: @Composable RowScope.() -> Unit
) {
// Create a Row with the custom RowScope.
Row(
horizontalArrangement = Arrangement.spacedBy(8.dp),
modifier = modifier.padding(16.dp),
content = content
)
}
@Composable
fun MyNavigationBar(
modifier: Modifier,
// state: MutableState<Boolean>,
//navController: NavController,
onNavItemClick: (route: String) -> Unit
) {
//val backStackEntry by navController.currentBackStackEntryAsState()
//val currentRoute = backStackEntry?.destinatNavigationBarion?.route
NavigationBar(
modifier = modifier,
content = {
CustomRowScope(modifier = Modifier) {
bottomNavItems.forEach { item ->
//val selected = item.route == backStackEntry?.destination?.route
NavigationBarItem(
selected = false,//selected,
onClick = { onNavItemClick(item.route) },
icon = {
Icon(
imageVector = item.icon,
contentDescription = "${item.name} Icon",
)
}
)
}
}
}
)
}
1条答案
按热度按时间fnx2tebb1#
Jetpack Compose中有一个BottomAppBar组件,可以帮助您完成任务。下面是一个如何使用它的示例:
以下是您将获得的内容:
如果你想设置自定义高度和自定义项目间距,你可以这样做:
结果: