3.2.2　Scaffold

Scaffold是Material组件的布局容器，可用于展示抽屉（Drawer）、通知（Snack Bar）及底部导航的效果，Scaffold主要属性参见表3-12。

表3-12　Scaffold属性

下面是Scaffold的基本用法：

Scaffold(
      appBar: AppBar(title: Text('Flutter 实战入门'),),
      body: Container(
        child: Text('body'),
        alignment: Alignment.center,
      ),
      drawer: Drawer(
        child: ListView(
          children: <Widget>[
            DrawerHeader(
              child: Text('头像'),
            ),
            ListTile(title: Text("我的"),),
            ListTile(title: Text("关于"),),
            ListTile(title: Text("主页"),)
          ],
        ),
      ),
      endDrawer: Drawer(
        child: ListView(
          children: <Widget>[
            DrawerHeader(
              child: Text('头像（end）'),
            ),
            ListTile(title: Text("我的"),),
            ListTile(title: Text("关于"),),
            ListTile(title: Text("主页"),)
          ],
        ),
      ),
      floatingActionButton: FloatingActionButton(onPressed: (){},child:
        Text('+'),),
      floatingActionButtonLocation: FloatingActionButtonLocation.endFloat,
      floatingActionButtonAnimator: FloatingActionButtonAnimator.scaling,
      persistentFooterButtons:List.generate(3, (index){
        return RaisedButton(onPressed: (){},child:
          Text("persistent"),textColor: Colors.black,);
      }),
      bottomNavigationBar: Row(
        children: <Widget>[
          Expanded(
            child: RaisedButton(onPressed: (){},child: Text("微信"),),
            flex: 1,
          ),
          Expanded(
            child: RaisedButton(onPressed: (){},child: Text("通讯录"),),
            flex: 1,
          ),
          Expanded(
            child: RaisedButton(onPressed: (){},child: Text("发现"),),
            flex: 1,
          ),
          Expanded(
            child: RaisedButton(onPressed: (){},child: Text("我"),),
            flex: 1,
          ),
        ],
      ),
      bottomSheet: RaisedButton(onPressed: (){},child: Text('bottomSheet'),),

)

运行效果如图3-14所示。

打开Drawer的效果如图3-15所示。

图3-14　Scaffold未打开抽屉效果

图3-15　Scaffold打开抽屉效果