Compose UI 之 BottomAppBar 底部应用栏

本文介绍了Jetpack Compose的BottomAppBar组件,它用于创建底部应用栏,提供高度定制的导航解决方案。常见应用场景包括底部导航栏和操作按钮区。BottomAppBar有四种声明方式,分别对应不同的功能组合,如是否包含动作意图、悬浮按钮和滚动行为。文中通过示例展示了如何使用这些声明,并总结了BottomAppBar的特点,如与FAB的配合、在不同场景中的应用以及与导航组件的集成。

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

BottomAppBar 底部应用栏

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

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

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 悬浮按钮及 scrollBehaviorBottomAppBar

不带 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
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

虚妄皆空

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值