BottomAppBar 底部应用栏
BottomAppBar
是一个在 Jetpack Compose 中用于创建底部应用栏的组件。它提供了一个高度可定制且功能丰富的底部导航解决方案。
它的使用方式与 TopAppBar
类似。下面的图是 BottomAppBar
的基本样式图。
常见使用场景
BottomAppBar
在应用中常用于以下场景:
- 底部导航栏:作为应用的底部导航栏,
BottomAppBar
可以展示不同的页面 / 功能入口,使用户能够方便地在应用的不同部分之间进行切换。 - 操作按钮区:在
BottomAppBar
上放置一些常用的操作按钮,如搜索、设置等,以便用户能够快速访问这些功能。 - 与 FAB 配合:当应用中使用了 FAB 时,
BottomAppBar
可以与之协同工作,提供一种统一的视觉和操作体验。
BottomAppBar
声明及参数
BottomAppBar
有 4 个声明,声明的全部参数说明如下表。
参数 | 类型 | 描述 |
---|---|---|
actions | @Composable RowScope.() -> Unit | 这是一个 Composable 函数,用于定义底部应用栏中的操作项。这些操作项通常显示在栏的右侧,并且可以是图标按钮、文本按钮等。 |
modifier | Modifier | 用于修改 BottomAppBar 的布局、大小、位置等属性。 |
floatingActionButton | (@Composable () -> Unit)? | 这是一个可选的 Composable 函数,用于定义浮动操作按钮(FAB)。FAB 通常显示在底部应用栏的左侧或中间,并用于执行应用的主要操作。 |
containerColor | Color | 定义底部应用栏的容器颜色。 |
contentColor | Color | 定义底部应用栏中内容的颜色,如标题、图标等。 |
tonalElevation | Dp | 定义底部应用栏的材质阴影大小。这可以影响栏的视觉层次感和与其他 UI 元素的分隔。 |
contentPadding | PaddingValues | 定义底部应用栏内容的内边距。这可以控制内容(如标题、操作项等)与栏边缘之间的空间。 |
windowInsets | WindowInsets | 是一个用于处理窗口插入(如状态栏、导航栏等)的参数。 |
scrollBehavior | BottomAppBarScrollBehavior? | 这是一个可选的参数,用于定义底部应用栏的滚动行为。例如,当用户在可滚动的内容区域中滚动时,栏可以隐藏或显示。 |
content | @Composable RowScope.() -> Unit | 这是一个 Composable 函数,用于定义底部应用栏上的自定义操作项。 |
声明及对应的示例
BottomAppBar
在目前的 API 文档中的声明有 4 个类型。
- 不带
actions
动作意图,不带scrollBehavior
滚动行为的BottomAppBar
。 - 带有
actions
动作意图,带有floatingActionButton
悬浮按钮,不带scrollBehavior
滚动行为的BottomAppBar
。 - 不带
actions
动作意图,带scrollBehavior
滚动行为的BottomAppBar
。 - 带有
actions
意图入口,带有floatingActionButton
悬浮按钮及scrollBehavior
的BottomAppBar
。
不带 actions
动作意图,不带 scrollBehavior
滚动行为的 BottomAppBar
@Composable
fun BottomAppBar(
modifier: Modifier = Modifier,
containerColor: Color = BottomAppBarDefaults.containerColor,
contentColor: Color = contentColorFor(containerColor),
tonalElevation: Dp = BottomAppBarDefaults.ContainerElevation,
contentPadding: PaddingValues = BottomAppBarDefaults.ContentPadding,
windowInsets: WindowInsets = BottomAppBarDefaults.windowInsets,
content: @Composable RowScope.() -> Unit
): Unit
这个 BottomAppBar
的声明中,组件内部的布局只能通过 content
参数定义,且其类型是 @Composable RowScope.() -> Unit
,即在一个横向的布局范围内进行组织 BottomAppBar
内部结构。
下面是上述声明的示例及其运行结果。
@Composable
fun BasicBottomAppBarSample() {
// 使用Scaffold布局,它提供了一个基本的结构,包括顶部应用栏和底部应用栏
Scaffold(
bottomBar = {
// 在这里使用BottomAppBar
BottomAppBar(
containerColor = Color.LightGray, // 自定义容器颜色
contentColor = Color.Black, // 自定义内容颜色,这里定义了黑色,若改为红色,那么效果会是文字等颜色是红色(如运行结果中的第二个图)。
tonalElevation = 4.dp, // 自定义阴影大小
contentPadding = PaddingValues(horizontal = 16.dp, vertical = 8.dp), // 自定义内容内边距
content = {
// 在这里定义了两个子布局,分别位于 BottomAppBar 的两端。
Row(
modifier = Modifier.fillMaxWidth(),
verticalAlignment = Alignment.CenterVertically,
horizontalArrangement = Arrangement.SpaceBetween
) {
Row {
Icon(
imageVector = Icons.Default.Menu,
contentDescription = "菜单"
)
Spacer(modifier = Modifier.width(16.dp))
Text(text = "BottomA