AppBar — 什么是及 Flutter 中的配置和组件

Flutter 中 AppBar 是什么

AppBar — 是显示在 Scaffold 顶部的标准 Material 顶部面板组件。它包含屏幕标题、导航按钮（通常是“菜单”图标或“返回”箭头）和操作——打开搜索、设置或其他功能的图标。AppBar 会自动适应平台：在 Android 上使用标准的 Material bottom-shadow，在 iOS 上则使用更平滑的设计和透明效果。

AppBar 实现了 PreferredSizeWidget接口，这意味着它的高度是固定的，并在构建前已知。默认情况下，AppBar 在 Android 上的高度为 56dp，在 iOS 竖排模式下为 44dp，同时考虑到顶部的 SafeArea。这一特性使得 Scaffold 能够提前计算 body 的可用空间，避免渲染时的重新组合。

根据 Flutter Material 库指南（2026），AppBar 经历了多次迭代：在 Flutter 1.x 中，它只是一个简单的文本容器；在 Flutter 2.x 中，它获得了对 Material 3 和 flexibleSpace 的支持；在 Flutter 3.x 中，它与系统界面（状态栏颜色、透明度）实现了集成。现代 AppBar 在 Android 12+ 设备上支持 Material You 的 Dynamic Color。

AppBar 结构：属性和参数

AppBar 提供了一组参数，用于控制顶部面板的每个部分。理解这些属性可以灵活地将面板配置为任何设计要求，无需创建自定义解决方案。

Title 和 leading：配置标题和导航

title属性接受任何组件，但最常用的是通过 TextStyle 配置样式的 Text。对于较长的标题，建议将 title 包装在 Flexible 中，以便在空间不足时正确截断文本。如果没有显式设置，leading属性在通过 Navigator.push 转到嵌套屏幕时会自动被 BackButton 替代。

Actions：放置操作图标

actions列表包含对齐到 AppBar 右缘的组件。每个元素的宽度不应超过 48dp（Material Design 标准）。要对操作进行分组，请使用 PopupMenuButton——它将不那么重要的选项隐藏在下拉菜单中，并符合 Material 关于界面密度的建议。

AppBar 自定义：样式、颜色和行为

AppBar通过颜色、阴影和边距属性支持深度自定义。基本外观继承自应用程序的主题，但每个属性都可以单独覆盖。让我们来看看主要的配置场景。

AppBar 的背景颜色通过 backgroundColor 设置。如果未指定，则使用来自 ThemeData 的 appBarTheme。在 Material 3 中，AppBar 的颜色会自动根据 ColorScheme.primary 计算，但可以为特定屏幕覆盖。对于透明 AppBar（经常用于个人主页），请设置 backgroundColor: Colors.transparent 并配合 elevation: 0。

elevation属性控制 AppBar 下方的阴影。值为 0 时可消除阴影，营造“平平的”面板效果，这对于 Material 3 很重要。值为 4 时提供标准的 Material Design 阴影。要自定义管理阴影，请使用 shadowColor——阴影的颜色，用于在视觉上将面板与内容区分开。

要控制 AppBar 中的文本颜色，请使用 foregroundColor。该属性会影响标题、图标和 actions 中文本的颜色。当 backgroundColor 改变时，系统会自动选择对比度高的 foregroundColor，但可以为非标准设计强制设置。

SliverAppBar：AppBar 的动态版

SliverAppBar — 是 AppBar 的扩展，用于在 CustomScrollView 内使用，支持滚动时的动画：收缩、视差效果和固定。与标准的 AppBar 不同，SliverAppBar 是一个 sliver 组件，可以根据滚动位置动态改变大小。

SliverAppBar 的主要模式由 pinned、floating 和 snap 属性的组合决定。在 pinned 模式下，面板始终显示在屏幕顶部。在 floating 模式下，它会在向上滚动时出现。floating + snap 的组合创建了“粘性”面板行为，只要往上滚动一点点就会出现，经常用于新闻流。

根据 Flutter API SliverAppBar（2026），要使用 SliverAppBar，需要将普通的 ListView 或 Column 替换为带有 sliver 组件的 CustomScrollView。Scaffold 仍然正常工作，但 Scaffold 的 appBar 属性必须为 null——SliverAppBar 作为第一个 sliver 放置在 CustomScrollView 内。

在应用中配置 AppBar 的示例

让我们看看一个带有搜索、下拉菜单和 TabBar 的 AppBar示例。这段代码展示了在生产级 Flutter 应用中顶部面板的典型配置。

Scaffold(
  appBar: AppBar(
    title: const Text('目录'),
    centerTitle: true,
    leading: IconButton(
      icon: const Icon(Icons.menu),
      onPressed: () => Scaffold.of(context).openDrawer(),
    ),
    actions: [
      IconButton(
        icon: const Icon(Icons.search),
        onPressed: () => showSearch(context: context, delegate: ProductSearch()),
      ),
      PopupMenuButton<String>(
        onSelected: (String value) {},
        itemBuilder: (context) => [
          const PopupMenuItem(value: 'settings', child: Text('设置')),
          const PopupMenuItem(value: 'about', child: Text('关于应用')),
        ],
      ),
    ],
    bottom: const TabBar(
      tabs: [
        Tab(text: 'All'),
        Tab(text: 'New'),
        Tab(text: 'Popular'),
      ],
    ),
  ),
  body: const TabBarView(
    children: [
      AllProductsPage(),
      NewProductsPage(),
      PopularProductsPage(),
    ],
  ),
)

在示例中，AppBar 包含居中的标题、左侧的打开 Drawer 按钮、右侧的搜索图标和下拉菜单。TabBar 位于 bottom，用于在产品分类之间切换。这种配置覆盖了大多数移动应用的场景：导航、搜索、附加选项和切换模块——全部集成在一个顶部面板中。