BottomAppBar

底部应用栏组件

BottomAppBar是Flutter中的一个Material Design底部应用栏组件，专门用于在屏幕底部显示导航、操作按钮和其他交互元素。与传统的AppBar不同，BottomAppBar提供了更灵活的布局选项，特别是与FloatingActionButton的集成能力，支持FAB嵌入到凹口中的视觉效果。

核心逻辑: BottomAppBar继承自StatelessWidget，通过组合多个子组件(如IconButton、Text等)来构建底部栏，同时提供凹口形状支持，可与FloatingActionButton完美配合。

使用场景

导航应用: 作为底部导航栏，显示主要页面切换入口
操作中心: 在底部集中展示常用操作按钮
媒体播放器: 显示播放控制、进度条等媒体相关控件
表单提交: 作为表单页面的提交操作区域

示例

基础底部导航栏

import 'package:flutter/material.dart';

class BasicBottomAppBarExample extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('基础 BottomAppBar')),
      body: Center(child: Text('主内容区域')),
      bottomNavigationBar: BottomAppBar(
        color: Colors.blue,
        child: Row(
          mainAxisAlignment: MainAxisAlignment.spaceAround,
          children: [
            IconButton(icon: Icon(Icons.home), onPressed: () {}),
            IconButton(icon: Icon(Icons.search), onPressed: () {}),
            IconButton(icon: Icon(Icons.settings), onPressed: () {}),
          ],
        ),
      ),
    );
  }
}

带凹口和浮动按钮的复杂布局

import 'package:flutter/material.dart';

class NotchedBottomAppBarExample extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('带凹口 BottomAppBar')),
      body: Center(child: Text('浮动按钮嵌入凹口效果')),
      floatingActionButton: FloatingActionButton(
        onPressed: () {},
        child: Icon(Icons.add),
      ),
      floatingActionButtonLocation: FloatingActionButtonLocation.centerDocked,
      bottomNavigationBar: BottomAppBar(
        shape: CircularNotchedRectangle(), // 圆形凹口
        notchMargin: 8.0, // 凹口边距
        child: Container(
          height: 60,
          child: Row(
            mainAxisAlignment: MainAxisAlignment.spaceBetween,
            children: [
              IconButton(icon: Icon(Icons.menu), onPressed: () {}),
              IconButton(icon: Icon(Icons.more_vert), onPressed: () {}),
            ],
          ),
        ),
      ),
    );
  }
}

自定义主题和交互效果

import 'package:flutter/material.dart';

class ThemedBottomAppBarExample extends StatefulWidget {
  @override
  _ThemedBottomAppBarExampleState createState() => _ThemedBottomAppBarExampleState();
}

class _ThemedBottomAppBarExampleState extends State<ThemedBottomAppBarExample> {
  int _selectedIndex = 0;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('主题化 BottomAppBar')),
      body: _buildBody(),
      bottomNavigationBar: BottomAppBar(
        elevation: 8.0, // 阴影高度
        color: Theme.of(context).primaryColor,
        child: Row(
          children: [
            _buildNavItem(Icons.home, '首页', 0),
            _buildNavItem(Icons.favorite, '收藏', 1),
            Spacer(), // 中间留空给 FAB
            _buildNavItem(Icons.notifications, '通知', 2),
            _buildNavItem(Icons.person, '我的', 3),
          ],
        ),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: () {},
        child: Icon(Icons.add),
        backgroundColor: Colors.orange,
      ),
      floatingActionButtonLocation: FloatingActionButtonLocation.centerDocked,
    );
  }

  Widget _buildNavItem(IconData icon, String label, int index) {
    return Expanded(
      child: InkWell(
        onTap: () => setState(() => _selectedIndex = index),
        child: Column(
          mainAxisSize: MainAxisSize.min,
          children: [
            Icon(icon, color: _selectedIndex == index ? Colors.white : Colors.white70),
            Text(label, style: TextStyle(
              color: _selectedIndex == index ? Colors.white : Colors.white70,
              fontSize: 12,
            )),
          ],
        ),
      ),
    );
  }

  Widget _buildBody() {
    return Center(child: Text('当前选中: $_selectedIndex'));
  }
}

注意点

常见问题

性能考虑: BottomAppBar在频繁更新时可能引起重绘，避免在build方法中创建复杂子组件
凹口兼容性: CircularNotchedRectangle形状在某些设备上可能显示不一致，需测试多设备
高度限制: 默认高度可能不适合所有设计，需通过Container包装调整
手势冲突: 底部手势可能与页面内容冲突，合理设置hitTestBehavior

优化技巧

使用const构造函数创建静态子组件以减少重建
对于复杂布局，考虑将BottomAppBar提取为独立Widget
使用Hero动画实现页面切换时的平滑过渡效果

最佳实践

保持底部操作项数量在2-5个之间，避免过于拥挤
与FloatingActionButton配合时，确保凹口大小与FAB匹配
在深色主题下适当调整颜色对比度
为所有交互元素提供语义化标签(Semantics)

构造函数

BottomAppBar({
  Key? key,
  this.color, // 背景颜色
  this.elevation, // 阴影高度
  this.shape, // 形状（支持凹口）
  this.clipBehavior = Clip.none, // 裁剪行为
  this.notchMargin = 4.0, // 凹口边距
  this.child, // 子组件
})

属性

属性名	属性类型	说明
color	Color?	底部应用栏的背景颜色
elevation	double?	阴影高度，控制立体效果
shape	NotchedShape?	定义凹口形状，如 CircularNotchedRectangle
clipBehavior	Clip	子组件裁剪方式，默认 Clip.none
notchMargin	double	凹口与边缘的最小距离，默认 4.0
child	Widget?	底部栏的主要内容组件

关键属性详解

shape属性:
- 功能: 定义BottomAppBar的顶部形状，特别用于创建FloatingActionButton嵌入的凹口效果
- 常用值: CircularNotchedRectangle()(圆形凹口)、AutomaticNotchedShape()(自动凹口)
- 性能影响: 复杂的形状可能增加绘制成本，建议使用预定义形状
notchMargin属性:
- 功能: 控制凹口与BottomAppBar边缘的距离，影响FAB的嵌入位置和视觉效果
- 调整建议: 根据FAB大小和设计需求调整，通常设置在4.0-12.0之间
elevation属性:
- 功能: 控制阴影效果，影响组件的视觉层次和Material Design规范符合度
- 最佳实践: 遵循Material Design高程标准，通常设置在0-12之间

AppBar

NavigationBar