Flutter(八)基础控件-Scaffold

感君一回顾，思君朝与暮。

本文部分图片和文字介绍转载于 https://www.jianshu.com/p/a0fcb755a7b8

Scaffold

• Scaffold 实现了基本的 Material 布局。只要是在 Material 中定义了的单个界面显示的布局控件元素，都可以使用 Scaffold 来绘制。
  提供展示抽屉（drawers，比如：左边栏）、通知（snack bars） 以及 底部按钮（bottom sheets）。
  我们可以将 Scaffold 理解为一个布局的容器。可以在这个容器中绘制我们的用户界面。

  Scaffold({

  Key key,

  this.appBar,/// 一个appBar  Widget  
  this.body,///  页面的内容,widget  通常为 Container
  this.floatingActionButton,///  android  Material design 设计中的 button  通常悬浮在屏幕右下角
  this.floatingActionButtonLocation,/// button 的位置
  this.floatingActionButtonAnimator,///button 的动画
  this.persistentFooterButtons,///  存在于底部  navigationbar与 body之间的一个按钮list,  Widget[]
  //在源码中看到了手动打开抽屉的方法   Scaffold.of(context).openDrawer();
  this.drawer,///抽屉匣      侧滑菜单,类似手机qq的侧滑菜单  默认隐藏    左边     
  this.endDrawer,///抽屉匣      侧滑菜单,类似手机qq的侧滑菜单  默认隐藏    右边
  this.bottomNavigationBar,///底部切换菜单,在android上通常与viewpage一起使用的切换按钮

  ///bottomSheet 类似 CoordinatorLayout 中的 使用了 BottomSheetBehavior  的布局,暂时没发现有手动隐藏的方法
  ///想要手动隐藏,可以自己创建  showBottomSheet  或者  showModalBottomSheet 这两个,前者打开的是一个背景透明的bottomsheet 后面则是背景为灰色的bottomsheet
  ///手动关闭方法  Navigator.of(context).pop(context);
  this.bottomSheet,
  this.backgroundColor,///背景色
  this.resizeToAvoidBottomPadding,////已废弃，resizeToAvoidBottomInset作为替代
  this.resizeToAvoidBottomInset,///是否重新计算布局,类似  windowsoftinput 属性中的额adjustReside  默认为 true，防止一些小组件重复
  this.primary =true,///是否从屏幕的顶部开始布局,即在状态栏的底部开始
  ///DragStartBehavior.start   开始触摸事件时 drawer就响应关闭或者打开事件,
  ///如果这只为 DragStartBehavior.down 则会在第一个事件结束是响应打开或关闭抽屉匣 drawer
  ///但是在实际使用过程中给我的感受并没有很大差别,   官方推荐 start   更顺滑
  this.drawerDragStartBehavior = DragStartBehavior.start,
  ///如果为true  则body的高度将不再是在bottomnavagationbar上面或者persistentFooterButtons这个上面了,而是整个父控件的底部
  ///这样做的好处是如果你的bottomnavagationbar是不规则的矩形的时候,可以保证最大程度的看到你的body,不响应美观
  this.extendBody =false,
   ///此属性同上,但是上面说的是底部,这个说的是顶部
  this.extendBodyBehindAppBar =false,
  this.drawerScrimColor,///当侧边抽屉被打开的时候,用来填充抽屉没有覆盖的部分的背景颜色
  this.drawerEdgeDragWidth,///侧边栏预留打开抽屉的有效距离
  this.drawerEnableOpenDragGesture =true,///左侧菜单栏是否可以拖动
  this.endDrawerEnableOpenDragGesture =true,///右侧菜单栏是否可拖动
  
  })

创建容器

import 'package:flutter/material.dart';

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

class FMScaffoldState extends State {
  @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,
    );
  }
}

1. AppBar

image

2. 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 可以改变按钮位置，可以自行尝试。

image

3. persistentFooterButtons

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

  List _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,
      ),
    ];
  }

image

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(),
      ),
    );
  }

image

image

image

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'),
        ),
      ],
    );
  }

image

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,
          );
        },
    );

image

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,
      ),
    );
  }

image

8. 其他属性 请参考文章开头Scaffold属性介绍

9. Scaffold整体属性图标

image.png