Flutter AppBar 详解

帅次.

1993人浏览 · 2025-05-02 09:00:00

帅次. · 2025-05-02 09:00:00 发布

一、引言

AppBar 是 Flutter 提供的顶栏组件，通常用于应用的导航栏，包含标题、返回按钮、菜单等功能。AppBar 结合 Scaffold 使用，能够增强用户体验，提供一致的导航交互。本文将介绍 AppBar 的基本用法、主要属性及自定义方式。

二、AppBar 的基本用法

AppBar 主要通过 title 设置标题，并可包含 leading（左侧组件）和 actions（右侧操作按钮）。

Scaffold(
  appBar: AppBar(
    title: Text('我是个AppBar'),
  ),
  body: // 页面内容
)

三、主要属性

属性	说明
`title`	标题组件，通常为 `Text`
`leading`	左侧组件，常用于返回按钮、菜单按钮等
`actions`	右侧操作按钮，可放置多个 `IconButton` 或 `PopupMenuButton`
`backgroundColor`	AppBar 的背景颜色
`elevation`	阴影高度
`centerTitle`	是否居中标题（`true` 居中，`false` 左对齐）

示例：

AppBar(
  title: Text('我是个AppBar'),
  backgroundColor: Colors.yellow,
  centerTitle: true,
  elevation: 4,
  actions: [
    IconButton(
      icon: Icon(Icons.search),
      onPressed: () {},
    ),
  ],
)

四、自定义 AppBar

4.1 自定义 `leading` 图标

AppBar(
  leading: IconButton(
    icon: Icon(Icons.menu),
    onPressed: () {},
  ),
  title: Text('导航栏'),
)

4.2 添加 `actions` 右侧菜单

AppBar(
  title: Text('操作栏'),
  actions: [
    IconButton(icon: Icon(Icons.notifications), onPressed: () {}),
    IconButton(icon: Icon(Icons.settings), onPressed: () {}),
  ],
)