Scaffold 详解

一、主要的属性说明

• appBar：显示在界面顶部的一个 AppBar
• body：当前界面所显示的主要内容
• floatingActionButton： 在 Material 中定义的一个功能按钮。
• persistentFooterButtons：固定在下方显示的按钮。
• drawer：侧边栏控件
• bottomNavigationBar：显示在底部的导航栏按钮栏。可以查看文档：Flutter学习之制作底部菜单导航
• backgroundColor：背景颜色
• resizeToAvoidBottomPadding： 控制界面内容 body
  是否重新布局来避免底部被覆盖了，比如当键盘显示的时候，重新布局避免被键盘盖住内容。默认值为 true。

二、示例代码

import 'package:flutter/material.dart';

void main() => runApp(new MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return new MaterialApp(
      title: 'Scaffold组件',
      home: DemoPage(),
    );
  }
}

class DemoPage extends StatelessWidget {

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      //应用栏
      appBar: AppBar(
        backgroundColor: Colors.red,
        title: Text('标题',style: TextStyle(color: Colors.white),),
        centerTitle: true,
        elevation: 10.0,
        leading: Icon(Icons.home),
        actions: <Widget>[
          Icon(Icons.add),
        ],
        bottom: PreferredSize(
          child: Container(
            height: 50.0,
            child: Center(
              child: Text('显示在标题下面的内容'),
            ),
            decoration: BoxDecoration(
              color: Colors.redAccent,
            ),
          ),
          preferredSize: Size.fromHeight(50.0),
        ),
      ),

      //内容区域
      body: Center(
        child: Text('中间内容部分',style: TextStyle(color: Colors.red,fontSize: 36.0),),
      ),

      //侧边栏 抽屉组件
      drawer: Drawer(
          child: Center(
            child: Container(
              width: 150.0,
              color: Colors.orange,
              child: Text('侧边栏',style: TextStyle(color: Colors.white,fontSize: 24.0),),
            ),
          )
      ),

      //底部 持久化按钮
      persistentFooterButtons: <Widget>[
        Icon(Icons.person),
        Icon(Icons.add),
        Icon(Icons.print),
        Icon(Icons.apps),
        Icon(Icons.chat),
      ],

      //底部 导航按钮
      bottomNavigationBar: BottomNavigationBar(
        currentIndex: 1,
        fixedColor: Colors.redAccent,
        items: <BottomNavigationBarItem>[
          BottomNavigationBarItem(
            icon: Icon(Icons.home),
            title: Text('主页'),
          ),
          BottomNavigationBarItem(
            icon: Icon(Icons.chat),
            title: Text('聊天'),
          ),
          BottomNavigationBarItem(
            icon: Icon(Icons.person),
            title: Text('我的'),
          ),
        ],
      ),

      //底部 FAB按钮
      floatingActionButton: Builder(
          builder: (BuildContext context){
            return FloatingActionButton(
              backgroundColor: Colors.red,
              child: Icon(Icons.add),
              onPressed: (){

                var snackbar = new SnackBar(
                  content: Text('显示SnackBar'),
                  backgroundColor: Colors.red,
                  duration: Duration(
                    milliseconds : 1500,
                  ),
                  action: SnackBarAction(
                      label: '撤销',
                      onPressed: (){}
                  ),
                );
                Scaffold.of(context).showSnackBar(snackbar);
              },
            );
          }
      )

    );
  }
}

运行后的第一个页面，每个部位含义在代码均有解释

从屏幕左侧往右滑，出现侧边栏

点击右下角红圈白色的 + 按钮（即FAB 按钮），将显示 SnackBar、撤销 字样