flutter：AppBar

大前端 flutter

发布时间 : 2025-08-25 00:00

字数:358 阅读 :

什么是 AppBar
AppBar 的常用属性
AppBar 的 bottom

什么是 `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)),
  ],
),

flutter：AppBar

什么是 AppBar

AppBar 的常用属性

AppBar 的 bottom

什么是 `AppBar`

AppBar 的 `bottom`