显示底部应用栏

创建一个底部应用栏,以帮助用户导航和访问应用中的功能。按照此指南使用 BottomAppBar 可组合项向应用添加底部应用栏。

版本兼容性

此实现要求项目的 minSDK 设置为 API 级别 21 或更高。

依赖项

创建底部应用栏

使用以下代码创建一个包含四个图标按钮和一个浮动操作按钮的底部应用栏

@Composable
fun BottomAppBarExample() {
    Scaffold(
        bottomBar = {
            BottomAppBar(
                actions = {
                    IconButton(onClick = { /* do something */ }) {
                        Icon(Icons.Filled.Check, contentDescription = "Localized description")
                    }
                    IconButton(onClick = { /* do something */ }) {
                        Icon(
                            Icons.Filled.Edit,
                            contentDescription = "Localized description",
                        )
                    }
                    IconButton(onClick = { /* do something */ }) {
                        Icon(
                            Icons.Filled.Mic,
                            contentDescription = "Localized description",
                        )
                    }
                    IconButton(onClick = { /* do something */ }) {
                        Icon(
                            Icons.Filled.Image,
                            contentDescription = "Localized description",
                        )
                    }
                },
                floatingActionButton = {
                    FloatingActionButton(
                        onClick = { /* do something */ },
                        containerColor = BottomAppBarDefaults.bottomAppBarFabColor,
                        elevation = FloatingActionButtonDefaults.bottomAppBarFabElevation()
                    ) {
                        Icon(Icons.Filled.Add, "Localized description")
                    }
                }
            )
        },
    ) { innerPadding ->
        Text(
            modifier = Modifier.padding(innerPadding),
            text = "Example of a scaffold with a bottom app bar."
        )
    }
}

关于代码的要点

  • 一个外部 Scaffold,设置了 bottomBar
  • bottomBar 的实现,包含操作列表。
  • 操作是对 IconButton 的实现,包含用于图片和内容描述文本的 Icon,每个操作都带有一个用于执行这些操作的 onClick lambda。

您可以为以下关键参数传递可组合项

  • actions:一系列图标,显示在栏的左侧。这些通常是给定屏幕的关键操作或导航项。
  • floatingActionButton:显示在栏右侧的浮动操作按钮。

结果

 An example of a bottom app bar
图 1. 底部应用栏示例。

包含此指南的集合

此指南是这些精心策划的快速指南集合的一部分,这些集合涵盖了更广泛的 Android 开发目标

了解如何使用标准化平台构建复杂的用户界面。Scaffold 将 UI 的不同部分结合在一起,使应用具有一致的外观和风格。
了解可组合函数如何使您能够轻松创建基于 Material Design 设计系统的美观 UI 组件。

有问题或反馈?

前往我们的常见问题页面,了解快速指南,或与我们联系并告诉我们您的想法。