Flutter页面骨架（Scaffold）

封面图 • 2025-11-01 • Flutter

在 Flutter 中，**Scaffold** 是一个非常重要的组件，它为应用提供了一个基本的页面结构（布局），类似于 HTML 中的 `<body>` 或其他框架中的“页面模板”。它是构建 Flutter 应用页面的基础，提供了诸如标题栏、底部导航栏、抽屉菜单、浮动操作按钮等常见 UI 元素的支持。

---

## ✅ Scaffold 的主要组成部分

`Scaffold` 通常包含以下几个部分：

| 属性 | 类型 | 说明 |
|------|------|------|
| `appBar` | `PreferredSizeWidget` | 页面顶部的标题栏（如 `AppBar`） |
| `body` | `Widget` | 页面主要内容区域 |
| `drawer` | `Widget` | 左侧抽屉菜单（用于导航） |
| `endDrawer` | `Widget` | 右侧抽屉菜单 |
| `floatingActionButton` | `Widget` | 浮动操作按钮（通常位于右下角） |
| `floatingActionButtonLocation` | `FloatingActionButtonLocation` | 控制浮动按钮的位置 |
| `persistentFooterButtons` | `List<Widget>` | 页面底部固定按钮（如“下一步”、“取消”） |
| `bottomNavigationBar` | `Widget` | 底部导航栏（如 `BottomNavigationBar`） |
| `backgroundColor` | `Color` | 页面背景颜色 |
| `resizeToAvoidBottomInset` | `bool` | 是否自动调整内容以避免底部 inset（如键盘弹出时） |

---

## 🧱 示例代码：一个简单的 Scaffold 页面

```dart
import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('Flutter Scaffold 示例'),
        ),
        body: Center(
          child: Text('这是页面主体内容'),
        ),
        drawer: Drawer(
          child: ListView(
            padding: EdgeInsets.zero,
            children: <Widget>[
              DrawerHeader(
                decoration: BoxDecoration(
                  color: Colors.blue,
                ),
                child: Text(
                  '导航菜单',
                  style: TextStyle(color: Colors.white, fontSize: 24),
                ),
              ),
              ListTile(
                title: Text('首页'),
                onTap: () {},
              ),
              ListTile(
                title: Text('设置'),
                onTap: () {},
              ),
            ],
          ),
        ),
        floatingActionButton: FloatingActionButton(
          onPressed: () {
            // 点击事件
          },
          child: Icon(Icons.add),
        ),
        bottomNavigationBar: BottomNavigationBar(
          items: [
            BottomNavigationBarItem(icon: Icon(Icons.home), label: '首页'),
            BottomNavigationBarItem(icon: Icon(Icons.settings), label: '设置'),
          ],
        ),
      ),
    );
  }
}
```

---

## 📌 使用建议

- **`Scaffold` 是页面的骨架**，适合用来组织页面的结构。
- 如果你想要更复杂的页面布局，可以嵌套多个 `Scaffold`，但一般不推荐，因为 `Scaffold` 是页面级别的组件。
- `Scaffold` 通常作为 `MaterialApp` 的 `home` 属性值使用。

---

## 🔍 常见问题

### Q: 我可以在一个页面中使用多个 Scaffold 吗？
A: 不建议。每个页面应只有一个 `Scaffold`，否则可能导致布局混乱或功能异常。

### Q: 如何隐藏 AppBar？
A: 设置 `appBar: null` 即可。

### Q: 如何控制 FloatingActionButton 的位置？
A: 使用 `floatingActionButtonLocation` 属性，例如：
```dart
floatingActionButtonLocation: FloatingActionButtonLocation.centerFloat,
```

---

如果你有具体的页面需求（比如带抽屉、底部导航、浮动按钮等），我可以帮你定制一个完整的 Scaffold 示例。需要吗？