Scaffold：它是什么、结构和 Flutter 组件

Flutter 中的 Scaffold 是什么

Scaffold — 是来自 Material Design 库的组件编排器，它构建了屏幕的基本视觉结构。它实现了标准的 Material 应用模式：顶部面板、屏幕主体、侧边菜单和悬浮按钮。与仅设置尺寸和样式的 Container 不同，Scaffold 将整个屏幕作为统一系统进行管理。

每个按照 Material Design 构建的 Flutter 应用程序都从 MaterialApp 开始，其中每个屏幕都被包装在 Scaffold 中。正是 Scaffold 确保了 AppBar 在所有设备上的正确显示，考虑到 iPhone X 及更新设备的 SafeArea。它还负责 z 序：Drawer 显示在 body 之上，SnackBar 显示在整个界面之上，但在对话框下方。

根据官方 Flutter API Reference (2026)，Scaffold 是 SnackBar、BottomSheet 和 PersistentBottomSheet 等组件正确工作的必要条件。没有 Scaffold，这些组件会抛出异常，因为它们依赖 InheritedWidget Scaffold.of 来访问 Scaffold 上下文。因此，将任何内容直接放置在 Container 而非 Scaffold 中是初学者常犯的错误，导致 Material 功能丢失。

组件层次中的 Scaffold

在典型的 Flutter 应用程序中，Scaffold 位于 MaterialApp 内部，通常在跨平台开发中位于 WidgetsApp 或 CupertinoApp 之下。MaterialApp 创建 Navigator 和主题，而 Scaffold 确定当前屏幕的结构。每个屏幕都可以有自己的 Scaffold，具有独特的 AppBar、Drawer 和 BottomNavigationBar，从而可以灵活地为特定页面定制界面。

为了深度定制，Scaffold 可以与 NestedScrollView 组合使用 — 这可以实现复杂的滚动效果，例如具有视差效果的消失 AppBar。但在大多数情况下，标准的 Scaffold 及其属性就足以构建生产级屏幕。

Scaffold 结构：框架的关键部分

Scaffold 由多个必要和可选区域组成，每个区域负责界面的特定部分。让我们分别检查每个部分，以了解它们如何相互作用。

AppBar — 顶部面板

AppBar — 屏幕的顶部面板，显示标题、导航按钮和操作。它自动获取正确的 56dp 高度，并为带有流海的设备考虑 SafeArea。可以在 AppBar 中嵌入 TabBar，使用 bottom 属性切换选项卡。

Drawer — 侧边菜单

Drawer — 从左侧滑出的面板，提供应用程序模块之间的导航。如果设置了 drawer 属性，Scaffold 会自动在 AppBar 中添加馒饼图标。Drawer 可以包含 DrawerHeader、带有菜单项的 ListView 和用户信息。

BottomNavigationBar — 底部导航

BottomNavigationBar — 底部的导航面板，用于在主要模块之间切换。它包含 2 到 5 个带标签的图标，并通过 NavigationBar 支持带有活动指示的 Material 3。Scaffold 将其放置在屏幕底部，自动将 body 向上移动以避免内容被遮挡。

FloatingActionButton — 悬浮按钮

FloatingActionButton — 放置在屏幕右下角的圆形按钮。用于屏幕上的主要操作，例如添加新条目或发送消息。Scaffold 通过 extended 属性支持多个 FAB 的扩展动画。

Body — 主要内容

Body — 屏幕的中央区域，主要内容放置在这里。作为 body 可以是任何组件：Column、ListView、GridView、Stack 或自定义组合。Scaffold 自动计算 body 的高度，考虑到 AppBar、BottomNavigationBar 和 SafeArea，这消除了手动调整尺寸的需要。

Scaffold 的主要属性

Scaffold 提供了超过 30 个属性用于配置屏幕的外观和行为。其中既有必要属性（body），也有可选属性用于管理间距、背景和键盘状态。理解每个属性有助于根据设计要求精确调整界面。

resizeToAvoidBottomInset 属性在处理表单时尤为重要：当设置为 true（默认）时，Scaffold 会在键盘出现时自动压缩 body，以使输入字段保持可见。这消除了编写自定义键盘监听器的需要。对于使用 SingleChildScrollView 的自定义场景，可以关闭该属性。

在应用程序中使用 Scaffold 的示例

让我们看一个使用完整 Material 组件集的 Scaffold 实际示例。代码创建了一个带有 AppBar、Drawer、BottomNavigationBar、FloatingActionButton 和 SnackBar 的屏幕 — 这是 Flutter 中移动应用的典型结构。

class MainScreen extends StatefulWidget {
  const MainScreen({super.key});

  @override
  State<MainScreen> createState() => _MainScreenState();
}

class _MainScreenState extends State<MainScreen> {
  int selectedIndex = 0;

  final List<Widget> pages = [
    const HomePage(),
    const SearchPage(),
    const ProfilePage(),
  ];

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('我的应用'),
        actions: [
          IconButton(icon: const Icon(Icons.search), onPressed: () {}),
        ],
      ),
      body: pages[selectedIndex],
      drawer: Drawer(
        child: ListView(
          children: [
            const DrawerHeader(child: Text('菜单')),
            ListTile(title: const Text('设置'), onTap: () {}),
          ],
        ),
      ),
      bottomNavigationBar: NavigationBar(
        selectedIndex: selectedIndex,
        onDestinationSelected: (int index) {
          setState(() => selectedIndex = index);
        },
        destinations: const [
          NavigationDestination(icon: Icon(Icons.home), label: 'Home'),
          NavigationDestination(icon: Icon(Icons.search), label: 'Search'),
          NavigationDestination(icon: Icon(Icons.person), label: 'Profile'),
        ],
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: () {
          ScaffoldMessenger.of(context).showSnackBar(
            const SnackBar(content: Text('操作完成')),
          );
        },
        child: const Icon(Icons.add),
      ),
    );
  }
}

示例中使用的是 Material 3 中的 NavigationBar，而非已过时的 BottomNavigationBar。Scaffold 自动连接所有部分：打开 Drawer 时 SnackBar 隐藏，切换选项卡时 body 更新，FloatingActionButton 保持不动。ScaffoldMessenger 确保即使层级结构中有多个 Scaffold，SnackBar 也能显示。

Scaffold 和 Material 3：配置特点

Material 3 (M3) — 是 Material Design 的演进，由 Google 于 2023 年推出。M3 中的 Scaffold 获得了一系列变化：新的 NavigationBar 组件取代了 BottomNavigationBar，通过 ColorScheme.fromSeed 支持动态颜色，以及更新的组件间距和高度建议。迁移到 M3 不需要更换 Scaffold — 只需更新应用主题即可。

要在项目中启用 Material 3，需要在 ThemeData 中设置 useMaterial3: true。Scaffold 会自动调整视觉外观：间距变大（16dp 变为 24dp），颜色根据种子颜色重新计算，FloatingActionButton 获得更大的尺寸和圆角。同时，Scaffold 所有现有属性仍然有效。

根据 Material Design 3 Specification (2026)，建议使用带有三到五个项目的 NavigationBar 而非 BottomNavigationBar。Scaffold 支持两种变体，但 NavigationBar 在 Pixel 设备上提供了更好的适应性和 Material You 支持。

为 Material 3 配置 Scaffold

要使 Scaffold 与 M3 正确工作，只需更新主题并将 BottomNavigationBar 替换为 NavigationBar。颜色将通过 ColorScheme.fromSeed 自动计算，Scaffold 将调整间距以符合新标准。如有需要，可以直接覆盖 backgroundColor。