flutter软件开发笔记09-安卓页面脚手架Scaffold的用途

Flutter 3 中的 Scaffold 就像一个"页面脚手架"，它帮你快速搭建一个符合 Material Design 标准的页面框架。用通俗的例子来说，它就像你房间的布局模板：

想象你要布置一个房间：

• 房顶要装个吊灯（AppBar）
• 中间要放沙发（页面内容）
• 左边要装个壁柜（抽屉菜单）
• 地面要放个控制面板（底部导航栏）
• 角落里要放个呼叫按钮（悬浮按钮）

用 Scaffold 可以直接把这些"家具"组装好，而不用自己计算位置。

一 程序界面

二 代码实现

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("我的小屋"),
          backgroundColor: Colors.blue,
        ),

        // 页面主体内容（相当于中间的沙发）
        body: Center(
          child: Text("欢迎来到我的小屋！", 
            style: TextStyle(fontSize: 24)),
        ),

        // 抽屉菜单（相当于左边的壁柜）
        drawer: Drawer(
          child: ListView(
            children: [ListTile(title: Text("工具箱"))],
          ),
        ),

        // 底部导航栏（相当于地面的控制面板）
        bottomNavigationBar: BottomNavigationBar(
          items: [
            BottomNavigationBarItem(icon: Icon(Icons.home), label: '主页'),
            BottomNavigationBarItem(icon: Icon(Icons.settings), label: '设置'),
          ],
        ),

        // 悬浮按钮（相当于角落的呼叫按钮）
        floatingActionButton: FloatingActionButton(
          onPressed: () {},
          child: Icon(Icons.call),
        ),
      ),
    );
  }
}

三 代码讲解

这个例子运行后会生成一个包含以下元素的页面：

1. 蓝色顶栏（AppBar）
2. 中间显示欢迎文字（Body）
3. 左侧滑出抽屉菜单（Drawer）
4. 底部有两个图标的导航栏
5. 右下角悬浮的呼叫按钮

关键特点：

• 自动处理布局：元素位置会自适应屏幕尺寸
• 内置交互：比如抽屉菜单的滑动效果
• 符合设计规范：默认遵循 Material Design
• 可组合性：可以只使用需要的部分（比如不要抽屉）

实际开发中，你可以像搭积木一样选择需要的组件，比如如果不需要抽屉菜单，直接删掉 drawer 参数即可。

四 总结

由此，可以看出flutter的先进之处，比其他框架更直接，避免重复造轮子，况且自己的造的轮子并不一定比现成的好用。