Scaffold
Scaffold 是一个基础的可视化界面结构组件，它实现了基本的Material Design布局结构。使用 Scaffold 可以快速地搭建起包含应用栏（AppBar）、内容区域（body）、抽屉菜单（Drawer）、底部导航栏（BottomNavigationBar）等元素的界面。
参数
Scaffold 参数列表
| 参数名 | 类型 | 描述 |
|---|---|---|
| appBar | PreferredSizeWidget | 设置页面顶部的应用栏，通常是一个 AppBar 组件。 |
| body | Widget | 页面的主要内容区域，可以是任意类型的 widget。 |
| floatingActionButton | Widget | 定义浮动按钮，通常是一个 FloatingActionButton 组件。 |
| floatingActionButtonLocation | FloatingActionButtonLocation | 定义浮动按钮的位置，默认为 FloatingActionButtonLocation.endFloat。 |
| floatingActionButtonAnimator | FloatingActionButtonAnimator | 定义浮动按钮动画行为，默认使用 FloatingActionButtonAnimator.scaling。 |
| drawer | Widget | 定义侧边抽屉菜单，通常是一个 Drawer 组件。 |
| endDrawer | Widget | 类似于 drawer，但它位于屏幕的另一侧。 |
| bottomNavigationBar | Widget | 设置页面底部的导航栏，如 BottomNavigationBar。 |
| bottomSheet | Widget | 显示在底部的模态弹出层，通常用于临时显示信息或操作选项。 |
| backgroundColor | Color | 设置 Scaffold 的背景颜色。 |
| resizeToAvoidBottomInset | bool | 控制是否调整 body 的大小以避免被键盘遮挡，默认值为true。 |
| primary | bool | 指示此 Scaffold 是否应该被视为应用程序的主要 Scaffold，影响滚动行为。 |
| extendBody | bool | 如果设置为 true，则 body 将延伸到 bottomNavigationBar 或 persistentFooter 下方。 |
| extendBodyBehindAppBar | bool | 如果设置为 true，则 body 将延伸到 appBar 下方。 |
| persistentFooterButtons | List | 定义一组固定在页面底部的按钮。 |
| drawerScrimColor | Color | 当 Drawer 打开时，屏幕上其他部分的颜色（半透明）。 |
| drawerEdgeDragWidth | double | 定义从屏幕边缘拖动打开 Drawer 的宽度。默认情况下，整个屏幕宽度都可以触发拖动手势。 |
| restorationId | String | 用于状态恢复的标识符，允许 Scaffold 在应用程序重启后恢复其状态。 |
内部组件使用
1.Flutter组件————AppBar
2.Flutter组件————FloatingActionButton
3.Flutter组件————BottomNavigationBar
代码示例
class MyHomePage extends StatefulWidget {const MyHomePage({super.key});State<MyHomePage> createState() => _MyHomePageState();
}class _MyHomePageState extends State<MyHomePage> {int pageIndex = 0;//所有右侧行为按钮List<Widget> actionList = const [Icon(Icons.social_distance),SizedBox(width: 30,),Icon(Icons.cyclone),SizedBox(width: 30,),Icon(Icons.manage_accounts),SizedBox(width: 40,)];List<Widget> pageList = const [Text("首页"),Text("新增"),Text("用户"),];void floatBtnFunc() {debugPrint("点击了悬浮按钮");HapticFeedback.vibrate();}Widget build(BuildContext context) {return Scaffold(appBar: AppBar(backgroundColor: Theme.of(context).colorScheme.inversePrimary, //背景颜色foregroundColor: const Color.fromARGB(135, 226, 5, 255),// leading: const Icon(Icons.accessibility_new_rounded), //左侧按钮title: const Text("Flutter 示例"), //标题// actions: actionList, //右侧按钮elevation: 10, //下方阴影shadowColor: const Color.fromARGB(136, 0, 225, 255), //阴影颜色centerTitle: true, // 标题是否居中（ios默认居中，Android默认居左）surfaceTintColor: const Color.fromARGB(172, 249, 128, 0), //表面颜色toolbarHeight: 50, //顶部栏高度iconTheme: const IconThemeData(size: 20, color: Color.fromARGB(207, 255, 251, 0)), //控制内部元素样式primary: true, // 是否显示主要按钮titleSpacing: 10, //标题内边距bottom: const TabBar(tabs: [Tab(icon: Icon(Icons.directions_car)),Tab(icon: Icon(Icons.directions_transit)),Tab(icon: Icon(Icons.directions_bike)),]), //顶部栏底部按钮shape: const RoundedRectangleBorder(borderRadius:BorderRadius.vertical(bottom: Radius.circular(15)) //顶部栏底部按钮样式),), //顶部栏body: Center(child: ListView(padding: const EdgeInsets.only(top: 15),children: [Row(children: [pageList[pageIndex]],)],),),floatingActionButton: FloatingActionButton(onPressed: floatBtnFunc, //点击事件tooltip: "悬浮按钮", //长按提示信息backgroundColor: Colors.blue, //背景颜色foregroundColor: Colors.white, // 内部组件颜色elevation: 10, //阴影shape: ShapeBorder.lerp(const CircleBorder(), const CircleBorder(), 0.5), //按钮形状mini: false, //是否小尺寸hoverColor: Colors.green, //悬浮颜色splashColor: Colors.yellow, //点击颜色focusColor: Colors.red, //获取焦点颜色autofocus: true, //是否自动获取焦点clipBehavior: Clip.hardEdge, //裁剪方式child: const Icon(Icons.info), // //按钮内部组件), //浮动按钮floatingActionButtonLocation:FloatingActionButtonLocation.centerDocked, //浮动按钮位置bottomNavigationBar: BottomNavigationBar(items: const <BottomNavigationBarItem>[BottomNavigationBarItem(icon: Icon(Icons.home), //图标label: "首页", //标签tooltip: "首页", //长按提示信息backgroundColor: Colors.blueAccent, //背景颜色activeIcon: Icon(Icons.home_filled), //选中图标),BottomNavigationBarItem(icon: Icon(Icons.add), label: "新增"),BottomNavigationBarItem(icon: Icon(Icons.verified_user), label: "用户"),], //底部导航栏currentIndex: pageIndex, //当前页面索引onTap: (index) {setState(() {pageIndex = index;});}, //点击事件type: BottomNavigationBarType.fixed, //导航栏的类型iconSize: 25, //图标大小elevation: 20, //阴影selectedFontSize: 12, //选中字体大小unselectedFontSize: 12, //未选中字体大小selectedItemColor: Colors.blue, //选中颜色unselectedItemColor: Colors.black, //未选中颜色showUnselectedLabels: true, //是否显示未选中的标签selectedLabelStyle: const TextStyle(color: Colors.blue), //选中文本样式unselectedLabelStyle: const TextStyle(color: Colors.black), //未选中文本样式backgroundColor: const Color.fromARGB(255, 99, 255, 247),showSelectedLabels: true, //分别控制是否显示选中和未选中的标签文本，默认都是显示的),backgroundColor: Colors.white24, //背景颜色persistentFooterButtons: const [Icon(Icons.add_a_photo_outlined),Icon(Icons.add_alarm_rounded)], //底部固定按钮drawer: Drawer(child: ListView(children: const [Text("侧边栏")],),), //左侧边栏（不可以使用appBar的leader）endDrawer: Drawer(child: ListView(children: const [Text("右侧侧边栏")],),) // 右侧边栏(不可以使用appBar的actions));}
}
效果
