Flutter——AppBar从入门到精通：实战属性详解与高级定制

1. AppBar基础入门：从零开始构建导航栏

第一次接触Flutter的开发者可能会被AppBar的各种属性搞得晕头转向，但其实它的核心功能非常简单 - 就是创建一个顶部导航栏。我刚开始用Flutter时也犯过不少错误，比如把整个AppBar的背景色设置成透明结果完全看不见了。下面我们就从最基础的用法开始，一步步拆解这个看似简单实则强大的组件。

最基础的AppBar只需要一个title属性就能工作：

dart复制Scaffold(
  appBar: AppBar(
    title: Text('我的第一个AppBar'),
  ),
  body: Center(child: Text('页面内容')),
);

这个简单的代码就能生成一个带有蓝色背景（Material Design默认主题色）和白色文字的导航栏。但实际开发中我们往往需要更多定制化功能，这时候就需要了解AppBar的三剑客：leading、title和actions。

leading是导航栏左侧的控件，通常用于返回按钮。如果不设置，在存在上级页面时会自动显示返回箭头。我遇到过需要自定义leading的情况，比如在一个电商App中，我们可能想把返回按钮换成店铺logo：

dart复制leading: IconButton(
  icon: Image.asset('assets/store_logo.png'),
  onPressed: () => Navigator.pop(context),
),

title不必多说，就是中间显示的标题。但有个小技巧：如果你想让标题在滑动时产生特殊效果，可以试试SliverAppBar，这个我们后面会详细讲解。

actions是我最喜欢的功能之一，它让右侧菜单变得非常简单。记得第一次实现搜索功能时，我傻傻地在body里自己布局，后来发现用actions只需要几行代码：

dart复制actions: [
  IconButton(
    icon: Icon(Icons.search),
    onPressed: () => showSearch(context: context, delegate: MySearchDelegate()),
  ),
  PopupMenuB