什么是 AppBar
AppBar 是 Flutter 提供的 应用顶部导航栏（标题栏） 组件。
它通常放在 Scaffold 的 appBar 属性里，属于 Material Design 风格的一部分。
主要作用：
- 显示应用标题、logo
- 提供导航按钮（返回键、菜单按钮等）
- 显示一些操作按钮（右上角的
actions） - 可以和
TabBar结合，做顶部标签页切换
AppBar 的常用属性
| 属性 | 类型 | 作用 |
|---|---|---|
title |
Widget? |
设置标题（常用 Text("标题")） |
leading |
Widget? |
左侧的组件（通常是返回按钮或菜单按钮） |
actions |
List<Widget>? |
右侧操作按钮（如搜索、设置图标） |
centerTitle |
bool? |
标题是否居中（iOS 默认居中，Android 默认靠左） |
backgroundColor |
Color? |
背景色 |
bottom |
PreferredSizeWidget? |
底部区域，常用于放 TabBar，也可以放自定义 widget |
elevation |
double |
阴影高度，0 表示无阴影 |
flexibleSpace |
Widget? |
可扩展的区域（比如放一个渐变背景） |
AppBar 的 bottom
bottom 的类型是 PreferredSizeWidget，代表一个“有固定高度的组件”。
最常用的就是放 TabBar，这样标签页会固定在 AppBar 底部。
appBar: AppBar(
title: Text("TabController Demo"),
bottom: TabBar(
// 绑定 TabController
controller: _tabController,
tabs: const [
Tab(text: "首页", icon: Icon(Icons.home)),
Tab(text: "消息", icon: Icon(Icons.message)),
Tab(text: "我的", icon: Icon(Icons.person)),
],
),
),
如果改成leading
leading: TabBar(
// 绑定 TabController
controller: _tabController,
tabs: const [
Tab(text: "首页", icon: Icon(Icons.home)),
Tab(text: "消息", icon: Icon(Icons.message)),
Tab(text: "我的", icon: Icon(Icons.person)),
],
),
