Compose UI 之 BottomAppBar 底部应用栏

BottomAppBar 底部应用栏

BottomAppBar 是一个在 Jetpack Compose 中用于创建底部应用栏的组件。它提供了一个高度可定制且功能丰富的底部导航解决方案。

它的使用方式与 TopAppBar 类似。下面的图是 BottomAppBar 的基本样式图。

常见使用场景

BottomAppBar 在应用中常用于以下场景：

1. 底部导航栏：作为应用的底部导航栏，BottomAppBar 可以展示不同的页面 / 功能入口，使用户能够方便地在应用的不同部分之间进行切换。
2. 操作按钮区：在 BottomAppBar 上放置一些常用的操作按钮，如搜索、设置等，以便用户能够快速访问这些功能。
3. 与 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