创建程序的时候，对Scaffold感到特别陌生，所以特地学习了下，总结如下：

Scaffold总体上来说，就是一个类似android app的简易框架，借助这个框架，可以很方便的创建顶部导航栏，中间主体，右下角浮动按钮，以及底部按钮工具栏。

 home: Scaffold(
        appBar: AppBar(
          title: const Text('Flutter layout demo'),
        ),
        body: ListView(
          children: [
            Image.asset(
              'images/lake.jpg',
              width: 600,
              height: 240,
              fit: BoxFit.cover,
            ),
            titleSection,
            buttonSection,
            textSection,
          ],
        ),
      ),

参考上述代码片段， 

1 appBar

属性定义： 

AppBar({
    Key key,
    this.leading,//导航条左侧需要展示的Widget
    this.automaticallyImplyLeading = true,
    this.title,//导航条的标题
    this.actions,//导航条右侧要展示的一组widgets
    this.flexibleSpace,
    this.bottom,导航条底部需要展示的widget
    this.elevation,
    this.shape,//导航条样式
    this.backgroundColor,//导航条背景色
    this.brightness,//设置导航条上面的状态栏的dark、light状态
    this.iconTheme,//导航条上的图标主题
    this.actionsIconTheme,//导航条上右侧widgets主题
    this.textTheme,//导航条上文字主题
    this.primary = true,//为false的时候会影响leading，actions、titile组件，导致向上偏移
    this.centerTitle,//导航条表示是否居中展示
    this.titleSpacing = NavigationToolbar.kMiddleSpacing,
    this.toolbarOpacity = 1.0,
    this.bottomOpacity = 1.0,
  })

在appBar中可以放置一个widget，这个widget可以是一个Text，也可以是一个组合式的Containter，里面由多个widget组成。参考如下的示例：

Widget _appBarDemo1() {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      home: Scaffold(
        appBar: AppBar(
          primary: true,//为false的时候会影响leading，actions、titile组件，导致向上偏移
          textTheme: TextTheme(//设置AppBar上面各种字体主题色
//            title: TextStyle(color: Colors.red),
          ),
          actionsIconTheme: IconThemeData(color: Colors.blue,opacity: 0.6),//设置导航右边图标的主题色，此时iconTheme对于右边图标颜色会失效
          iconTheme: IconThemeData(color: Colors.black,opacity: 0.6),//设置AppBar上面Icon的主题颜色
          brightness: Brightness.dark,//设置导航条上面的状态栏显示字体颜色
          backgroundColor: Colors.amber,//设置背景颜色
//          shape: CircleBorder(side: BorderSide(color: Colors.red, width: 5, style: BorderStyle.solid)),//设置appbar形状
//          automaticallyImplyLeading: true,//在leading为null的时候失效
          centerTitle: true,
          title: Text('AppBar Demo'),
          leading: IconButton(
              icon: Icon(Icons.add),
              onPressed: (){
                print('add click....');
              }
          ),
          actions: <Widget>[
            IconButton(icon: Icon(Icons.search), onPressed: (){print('search....');}),
            IconButton(icon: Icon(Icons.history), onPressed: (){print('history....');}),
          ],
        ),
      ),
    );
  }

2 body

用来展示 APP 的主体部分。主体部分大部分是通过组合 Container ，Column，Row，Stack来实现的，有兴趣的可以先行搜索flutter布局，后面也会专门来写这一部分内容。

3 floatingActionButton

floatingActionButton用来定义浮动在 body 右下角的组件。Flutter 入门的那个例子中就用到了这个参数，点击右下角的浮动按钮，增加计数。

4 bottomNavigationBar

底部导航栏，可以传入一个 Flutter 提供的 BottomNavigationBar 来实现导航栏。示例代码：

class BottomNavigationWidget extends StatefulWidget {
  @override
  State<StatefulWidget> createState() => BottomNavigationWidgetState();
}

class BottomNavigationWidgetState extends State<BottomNavigationWidget> {
  final _bottomNavigationColor = Colors.blue;
  int _currentIndex = 0;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      bottomNavigationBar: BottomNavigationBar(
        items: [
          BottomNavigationBarItem(
              icon: Icon(
                Icons.home,
                color: _bottomNavigationColor,
              ),
              title: Text(
                'HOME',
                style: TextStyle(color: _bottomNavigationColor),
              )),
          BottomNavigationBarItem(
              icon: Icon(
                Icons.email,
                color: _bottomNavigationColor,
              ),
              title: Text(
                'Email',
                style: TextStyle(color: _bottomNavigationColor),
              )),
          BottomNavigationBarItem(
              icon: Icon(
                Icons.pages,
                color: _bottomNavigationColor,
              ),
              title: Text(
                'PAGES',
                style: TextStyle(color: _bottomNavigationColor),
              )),
          BottomNavigationBarItem(
              icon: Icon(
                Icons.airplay,
                color: _bottomNavigationColor,
              ),
              title: Text(
                'AIRPLAY',
                style: TextStyle(color: _bottomNavigationColor),
              )),
        ],
        currentIndex: _currentIndex,
        onTap: (int index) {
          setState(() {
            _currentIndex = index;
          });
        },
      ),
    );
  }
} 

在上述示例代码中，增加了4个底部导航按钮，并获取了其index。实现页面响应和跳转，示例代码可参考如下的链接：Flutter | 使用BottomNavigationBar快速构建底部导航 - 简书

 5 bottomNavigationBar

 用来自定义底部导航。可以根据需要进行组合，已完成BottomNavigationBar不能实现的自定义布局。

Scaffold(
      //...省略部分代码
      floatingActionButton: FloatingActionButton(
          //悬浮按钮
          child: Icon(Icons.add),
          onPressed: () {}),
      floatingActionButtonLocation: FloatingActionButtonLocation.centerDocked,
      body: pages[currentIndex],
      bottomNavigationBar: BottomAppBar(
        child: Row(
          children: <Widget>[
            SizedBox(height: 49, width: itemWidth, child: bottomAppBarItem(0)),
            SizedBox(height: 49, width: itemWidth, child: bottomAppBarItem(1)),
            SizedBox(height: 49, width: itemWidth),
            SizedBox(height: 49, width: itemWidth, child: bottomAppBarItem(2)),
            SizedBox(height: 49, width: itemWidth, child: bottomAppBarItem(3))
          ],
          mainAxisAlignment: MainAxisAlignment.spaceAround,
        ),
        shape: CircularNotchedRectangle(),
      ),
    );

效果图如下（示例代码和图片来自：Flutter 使用 BottomAppBar 自定义底部导航（中间浮出按钮） - 简书）：

 

 item的自定义和响应代码示例：

Widget bottomAppBarItem(int index) {
    //设置默认未选中的状态
    TextStyle style = TextStyle(fontSize: 12, color: Colors.black);
    String imgUrl = normalImgUrls[index];
    if (currentIndex == index) {
      //选中的话
      style = TextStyle(fontSize: 13, color: Colors.blue);
      imgUrl = selectedImgUrls[index];
    }
    //构造返回的Widget
    Widget item = Container(
      child: GestureDetector(
        behavior: HitTestBehavior.opaque,
        child: Column(
          mainAxisSize: MainAxisSize.min,
          children: <Widget>[
            Image.asset(imgUrl, width: 25, height: 25),
            Text(
              titles[index],
              style: style,
            )
          ],
        ),
        onTap: () {
          if (currentIndex != index) {
            setState(() {
              currentIndex = index;
            });
          }
        },
      ),
    );
    return item;
  }