1. 基本介绍

Scaffold 提供了比较常见的页面属性。

Scaffold属性	介绍
appBar	页面上方导航条
body	页面容器
floatingActionButton	悬浮按钮
floatingActionButtonLocation	悬浮按钮位置
floatingActionButtonAnimator	悬浮按钮动画
persistentFooterButtons	显示在底部导航条上方的一组按钮
drawer	左侧菜单
endDrawer	右侧菜单
bottomNavigationBar	底部导航条
bottomSheet	一个持久停留在body下方，底部控件上方的控件
backgroundColor	背景色
resizeToAvoidBottomPadding	已废弃，resizeToAvoidBottomInset作为替代
resizeToAvoidBottomInset	默认为 true，防止一些小组件重复
primary	是否在屏幕顶部显示Appbar, 默认为 true，Appbar 是否向上延伸到状态栏，如电池电量，时间那一栏
drawerDragStartBehavior	控制 drawer 的一些特性
extendBody	body 是否延伸到底部控件
extendBodyBehindAppBar	默认 false，为 true 时，body 会置顶到 appbar 后，如appbar 为半透明色，可以有毛玻璃效果
drawerScrimColor	侧滑栏拉出来时，用来遮盖主页面的颜色
drawerEdgeDragWidth	侧滑栏拉出来的宽度
drawerEnableOpenDragGesture	左侧侧滑栏是否可以滑动
endDrawerEnableOpenDragGesture	右侧侧滑栏是否可以滑动

2. 示例代码

代码下载地址。如果对你有帮助的话记得给个关注，代码会根据我的 Flutter 专题不断更新。

3. Scaffold 组件

3.1 创建容器

优雅的编程，首先创建一个 scaffold.dart 文件。

import 'package:flutter/material.dart';

class FMScaffoldVC extends StatefulWidget {
  FMScaffoldVC({Key key}) : super(key: key);
  @override
  FMScaffoldState createState() => FMScaffoldState();
}

class FMScaffoldState extends State<FMScaffoldVC> {
  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return Container(
      child: Scaffold(
        appBar: _appBar(),
        body: _body(),
      ),
    );
  }

  AppBar _appBar(){
    return AppBar(
      title: Text('Scaffold'),
      backgroundColor: Colors.lightBlue,
    );
  }

  Container _body(){
    return Container(
      color: Colors.grey,
    );
  }
}

3.2 AppBar

scaffold appBar.png

3.3 floatingActionButton

我们给这个按钮增加一个返回事件，避免在使用其他属性时，导致页面缺失返回事件。

  Widget build(BuildContext context) {
    // TODO: implement build
    return Container(
      child: Scaffold(
        appBar: _appBar(),
        body: _body(),
        floatingActionButton: _floatingActionButton(),
        floatingActionButtonLocation: FloatingActionButtonLocation.centerDocked,
        floatingActionButtonAnimator: FloatingActionButtonAnimator.scaling,
      ),
    );
  }

  FloatingActionButton _floatingActionButton(){
    return FloatingActionButton(
      child: Text('返回'),
      onPressed: (){
        Navigator.pop(context);
      },
    );
  }

使用 floatingActionButtonLocation 可以改变按钮位置，可以自行尝试。

scaffold floatingActionButton.png

3.3 persistentFooterButtons

    return Container(
      child: Scaffold(
        appBar: _appBar(),
        body: _body(),
        floatingActionButton: _floatingActionButton(),
        floatingActionButtonLocation: FloatingActionButtonLocation.centerDocked,
        floatingActionButtonAnimator: FloatingActionButtonAnimator.scaling,
        persistentFooterButtons: _persistentFooterButtons(),
      ),
    );
  }

  List<Widget> _persistentFooterButtons(){
    return [
      Container(
        width: 100,
        height: 100,
        color: Colors.red,
      ),
      Container(
        width: 100,
        height: 100,
        color: Colors.green,
      ),
      Container(
        width: 100,
        height: 100,
        color: Colors.cyan,
      ),
    ];
  }

scaffold persistentFooterButtons.png

3.4 drawer / endDrawer

drawer / endDrawer 可以通过点击左上角，右上角按键触发，也可以左滑，右滑触发。
drawerEnableOpenDragGesture 默认为 true，设置 drawer 是否右滑触发
endDrawerEnableOpenDragGesture 默认为 true，设置 endDrawer 是否左滑触发

  Widget build(BuildContext context) {
    // TODO: implement build
    return Container(
      child: Scaffold(
        appBar: _appBar(),
        body: _body(),
        floatingActionButton: _floatingActionButton(),
        floatingActionButtonLocation: FloatingActionButtonLocation.centerDocked,
        floatingActionButtonAnimator: FloatingActionButtonAnimator.scaling,
        persistentFooterButtons: _persistentFooterButtons(),
        drawer: Drawer(),
        endDrawer: Drawer(),
      ),
    );
  }

scaffold drawer home.png

scaffold drawer.png

scaffold enddrawer.png

3.5 bottomNavigationBar

  Widget build(BuildContext context) {
    // TODO: implement build
    return Container(
      child: Scaffold(
        appBar: _appBar(),
        body: _body(),
        floatingActionButton: _floatingActionButton(),
        floatingActionButtonLocation: FloatingActionButtonLocation.centerDocked,
        floatingActionButtonAnimator: FloatingActionButtonAnimator.scaling,
        persistentFooterButtons: _persistentFooterButtons(),
        drawer: Drawer(),
        endDrawer: Drawer(),
        bottomNavigationBar: _bottomNavigationBar(),
      ),
    );
  }

  BottomNavigationBar _bottomNavigationBar(){
    return BottomNavigationBar(
      items: [
        BottomNavigationBarItem(
          icon: Icon(
              Icons.home
          ),
          title: Text('home'),
        ),
        BottomNavigationBarItem(
          icon: Icon(
              Icons.favorite
          ),
          title: Text('favorite'),
        ),
        BottomNavigationBarItem(
          icon: Icon(
              Icons.accessible
          ),
          title: Text('accessible'),
        ),
      ],
    );
  }

scaffold bottomNavigationBar.png

3.6 bottomSheet

  Widget build(BuildContext context) {
    // TODO: implement build
    return Container(
      child: Scaffold(
        appBar: _appBar(),
        body: _body(),
        floatingActionButton: _floatingActionButton(),
        floatingActionButtonLocation: FloatingActionButtonLocation.centerDocked,
        floatingActionButtonAnimator: FloatingActionButtonAnimator.scaling,
        persistentFooterButtons: _persistentFooterButtons(),
        drawer: Drawer(),
        endDrawer: Drawer(),
        bottomNavigationBar: _bottomNavigationBar(),
        bottomSheet: _bottomSheet(),
      ),
    );
  }

  BottomSheet _bottomSheet(){
    return BottomSheet(
        onClosing: (){},
        builder: (BuildContext context){
          return Container(
            height: 60,
            color: Colors.cyan,
            child: Text('Bottom Sheet'),
            alignment: Alignment.center,
          );
        },
    );

scaffold bottomSheet.png

3.7 backgroundColor

  Widget build(BuildContext context) {
    // TODO: implement build
    return Container(
      child: Scaffold(
        appBar: _appBar(),
        body: _body(),
        floatingActionButton: _floatingActionButton(),
        floatingActionButtonLocation: FloatingActionButtonLocation.centerDocked,
        floatingActionButtonAnimator: FloatingActionButtonAnimator.scaling,
        persistentFooterButtons: _persistentFooterButtons(),
        drawer: Drawer(),
        endDrawer: Drawer(),
        bottomNavigationBar: _bottomNavigationBar(),
        bottomSheet: _bottomSheet(),
      backgroundColor: Colors.yellow,
      ),
    );
  }

scaffold backgroundColor.png

3.8 其他属性

还有一些 bool 值属性，用的场景较少，有需要的自行了解。

4. 技术小结

了解 Scaffold 提供了哪些控件。
Scaffold 属性介绍。
基础 Scaffold 控件的使用。
基础 Scaffold 的布局效果。

Flutter入门（13）：Flutter 组件之 Scaffold 详解