Compose_16--导航2（底部导航栏）

最新推荐文章于 2025-03-11 17:09:08 发布

放弃了放弃

最新推荐文章于 2025-03-11 17:09:08 发布

阅读量2.2k

点赞数 1

分类专栏： Android-compose 文章标签： android

本文链接：https://blog.youkuaiyun.com/weixin_42404361/article/details/122096569

版权

本文介绍了如何在Android的Jetpack Compose中实现底部导航栏，从前置条件到依赖引入，再到Scaffold、BottomNavigation和BottomNavigationItem的使用，以及如何获取当前选中项和状态，最后通过一个简单的示例展示了完整的实现过程。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

一、前置条件：

如果想要实现底部导航栏，同样需要一下依赖：

dependencies {
    implementation "androidx.navigation:navigation-compose:2.4.0-beta02"
}

二、认识脚手架Scaffold

Compose_10--认识脚手架Scaffold_放弃了放弃的博客-优快云博客

三、认识底部导航栏--BottomNavigation

@Composable
fun BottomNavigation(
    modifier: Modifier = Modifier,  // 修饰符
    backgroundColor: Color = MaterialTheme.colors.primarySurface, // 背景颜色
    contentColor: Color = contentColorFor(backgroundColor),  // 内容颜色
    elevation: Dp = BottomNavigationDefaults.Elevation, // 阴影大小
    content: @Composable RowScope.() -> Unit  // 内容
)

四、认识底部导航栏项--BottomNavigationItem

@Composable
fun RowScope.BottomNavigationItem(
    selected: Boolean,  // 是否选中
    onClick: () -> Unit,  // 点击事件
    icon: @Composable () -> Unit, // 导航项的icon
    modifier: Modifier = Modifier, // 导航项的修饰符
    enabled: Boolean = true,  //  是否可用
    label: @Composable (() -> Unit)? = null, // 标签（可理解为导航标题）
    // 是否总是显示标签（设置为false时，仅选中时显示标签）
    alwaysShowLabel: Boolean = true, 
    // 交互资源（自定义交互样式和行为）
    interactionSource: MutableInteractionSource = remember { Mu