2.2 Scaffold组件
Scaffold可称为脚手架，一般通过它搭建页面的基本结构。一个页面可以理解为由三个部分组成：header头部，或者称之为标题栏；body体，可称之为内容主体页面；bottom脚，可称之为页面的尾部，比如bottomBar。
对于Scaffold来讲，AppBar就是它的头，body中配置加载的Widget就是它的主体，底部菜单导航栏就是它的尾部，如图2-3所示。
图2-3 Scaffold组件结构图
在Flutter项目中，通过main函数执行runAPP方法，然后使用MaterialApp组件来构建一个根布局Widget。一般启动初始化页面，没有标题也没有底部内容区，只有一个内容body主区，然后通过home或者其他属性来配置这个启动页面，代码如下。
2-3 Scaffold启动页面
所以对于Scaffold来讲，它实现了基本的Material Design设计结构，一般可以用作单页面的主结构，就是一个页面的父容器，在实际项目开发中。由标题栏与页面主体构成的页面也是比较常见的，在Flutter中也可通过Scaffold来实现，代码如下。
2-4 Scaffold常用页面格局
Scaffold组件的属性appBar的功能是配置一个AppBar，用来构成页面的头部，类似于Android原生开发中的AppBar与ToolBar，iOS原生开发中的UINavigationBar。
2.2.1 FloatingActionButton悬浮按钮
Scaffold组件中通过属性floatingActionButton（简称FAB）来配置页面右下角的悬浮按钮，基本使用代码如下。
2-5 Scaffold中悬浮按钮配置
FAB有三种类型：regular、mini、extended。regular与mini是相对的，区别在于mini类型是缩小版本。默认创建的FAB是regular类型，可通过将属性mini设为true，将FAB切换为mini类型，两种类型的FAB大小分别为56.0、46.0，效果如图2-4所示。
图2-4 FAB不同类型尺寸对比图
对于extended类型，可以通过FloatingActionButton. extended方式来创建，也可以通过构造函数来创建，不过要指定属性isExtended的值为true，与前两者的不同是它可以指定一个Label来显示文本，同时也限制了子Widget为Icon类型，对应添加子Widget的方式已不是child，而是封装成icon属性，代码如下。
2-6 extended类型的FAB效果
2.2.2 侧拉页面drawer配置
Scaffold的属性drawer用来配置左侧侧拉页面，属性endDrawe配置右侧侧拉页面。当配置了Scaffold的drawer内容时，就会在AppBar的左侧多出一个菜单按钮，当点击这个按钮或者从手机左侧边缘向右滑动就可触发这个页面。代码如下。
2-7 配置侧拉菜单栏后AppBar左右出现的效果
需要注意的是，此处左侧图标占用的是AppBar的leading属性，右侧占用的是actions属性。当自定义这两个属性值后，就需要再自定义打开侧拉页面的方法，通常打开侧拉页面的方法如下。
2.2.3 bottomNavigationBar配置底部导航栏菜单
在Scaffold中，通过bottomNavigationBar属性来配置页面底部导航栏，在通用的APP应用场景非常常见，代码如下。
2-8 底部菜单栏
用封装的方式来构建导航栏，代码如下。
属性type是fixed模式，fixed限制的切换效果是在导航栏菜单切换时，图标和文字标题会有微微缩放的动画效果，对于shifting来讲，切换动画效果更明显，在shifting模式下，只有当前选中的item的图标与文字才会显示出来，未选中的item中，标题文字是隐藏的，如图2-5所示。
图2-5 fixed与shifting模式效果图
也可以结合BottomAppBar、TabBar和TabBarView这样的组合来实现常见的首页底部菜单栏切换页面功能，代码如下。
然后创建TabBar与TabBarView联动的控制器，代码如下。
再通过Scaffold的body属性结合TabBarView来装载页面，bottomNavigationBar来配置BottomAppBar组件，代码如下。
使用BottomAppBar组件可以自定义任意的子组件来实现菜单栏，在这里使用的是TabBar结合Tab的方式，因为默认情况下TabBar没有提供修改背景色以及Tab点击的高亮颜色等，所以在这里使用Material来设置TabBar的背景颜色，通过Theme来设置Tab的点击高亮颜色与水波纹颜色，如代码清单2-18所示。
