Flutter 之 Scaffold 控件

属性

1. appBar 显示在界面顶部的一个 AppBar，也就是 Android 中的 ActionBar 、Toolbar

AppBar 控件属性有这些：

• leading 最左边范围的 Widget 控件，如放一个返回键

• automaticallyImplyLeading 如果 leading 不为 null ，则这个属性无效，如果 leading为 null ，并且该属性为 false ，则这个范围的空间会给 Title 。如图

  
  
  image.png
• title appBar 的标题，在 leading 后面

• actions 一个 List 可以使用 IconButton 控件从右往左排图标，

  
  
  IconButton.png
  
  

  也可以使用 PopupMenuButton 最右边显示 3 个点弹出更多，如图

  
  
  PopupMenuButton.png
• flexibleSpace 配合 SliverAppBar 实现类似 CoordinatorLayout 控件 AppBar 折叠效果
• bottom 一个 TabBar ，类似 TabLayout 控件
• elevation 阴影程度，默认为 4
• shape ShapeBorder ，当 elevation 大于 0 ，该属性有效，定义阴影的形状。有 RoundedRectangleBorder，ContinuousRectangleBorder，BeveledRectangleBorder
• backgroundColor appBar背景颜色
• brightness AppBar 的亮度，有白天 Brightness.light 和黑夜模式 Brightness.dark
• iconTheme AppBar 图标的样式 ，通过 IconTheme.of(context) 可以进行设置
• actionsIconTheme actions 属性设置的图标的样式，使用通 iconTheme
• textTheme appBar 的文字样式 可以使用 Theme.of(context).textTheme 来进行设置
• primary appBar 内容是否 嵌入 StatusBar 里面。false 为 嵌入
• centerTitle 标题是否居中显示
• titleSpacing 标题左右间距
• toolbarOpacity 应用程序栏的工具栏的透明程度。值 1.0 是完全不透明的，值 0.0 是完全透明的
• bottomOpacity appBar 底部透明度，结合 bottom 属性使用设置方式同 toolbarOpacity

appBar: AppBar(
        leading: null,
        automaticallyImplyLeading : false,
        title: Text(widget.title),
        actions: [
          IconButton(
            icon: Icon(Icons.ac_unit),
            onPressed: (){

            },
          ),
          new PopupMenuButton(
              itemBuilder: (BuildContext context) => >[
                new PopupMenuItem(child: new Text("我的")),
                new PopupMenuItem(child: new Text("设置")),
                new PopupMenuItem(child: new Text("钱包")),
              ]
          )
        ],
        elevation: 10,
        shape: new RoundedRectangleBorder(borderRadius: BorderRadius.circular(10.0),side: new BorderSide(
          style: BorderStyle.none,
        )),
        backgroundColor:Colors.green,
        brightness: Brightness.light,
        iconTheme: IconTheme.of(context).copyWith(color: Colors.black),
        actionsIconTheme: IconTheme.of(context).copyWith(color: Colors.black),
        textTheme: Theme.of(context).textTheme.apply(fontSizeFactor: 1.2),
        primary:true,
        centerTitle: true,
        titleSpacing:10,
        toolbarOpacity:1.0,
        bottomOpacity :0.5,
      ),

效果为

appBar.png

2. body 给一个 Widget ，当前界面所显示的主要布局内容 ，也就是 AppBar 下面部分，如

body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            Text(
              'Hello Flutter',
            ),
          ],
        ),
      ),

显示效果

body.png

3. floatingActionButton 类似 Android 的 FloatingActionButton 控件。
FloatingActionButton 有以下几个属性

• child FloatingActionButton 包含的子 Widget
• tooltip FloatingActionButton 控件长按显示的提示文本
• foregroundColor 除了 FloatingActionButton 的背景色，其他元素的颜色
• backgroundColor FloatingActionButton 的背景色
• focusColor focus 为 true 获取焦点按钮显示的颜色
• hoverColor 悬浮颜色，貌似没啥用
• heroTag 设置 Tag ，防止同一个页面两个 FloatingActionButton 冲突问题
• elevation 阴影程度
• focusElevation 聚焦阴影程度
• hoverElevation 悬浮状态阴影颜色
• highlightElevation 高亮对应的颜色
• disabledElevation 按钮禁用时的颜色
• onPressed 按钮点击事件
• mini 是小图标还是大图标
• shape 按钮的形状(矩形 Border，圆形图标 CircleBorder )
• clipBehavior Clip.antiAlias 剪辑具有抗锯齿功； Clip.antiAliasWithSaveLayer 在剪辑后立即剪辑具有抗锯齿和 saveLayer ：Clip.hardEdge：剪辑，但不应用抗锯齿；Clip.none：不剪辑。
• focusNode FocusNode，对焦点事件的一些设置和处理
• materialTapTargetSize 点击的效果
• isExtended 是否有一个显示的动画

4. floatingActionButtonLocation

设置 FloatingActionButton 的位置，有如下几个属性

FloatingActionButton .png

5. floatingActionButtonAnimator

FloatingActionButton 控件出现或消失的动画

6. persistentFooterButtons 固定在下方显示的按钮，比如对话框下方的确定、取消按钮

persistentFooterButtons:[
        Text('取消'),
        Text('确定')
      ],

persistentFooterButtons.png

7. drawer 侧边栏控件
通过 Drawer 创建侧边栏

 drawer: new Drawer(
       child: new UserAccountsDrawerHeader(
         accountName: new Text(
           "Flutter",
         ),
         accountEmail: new Text(
           "[email protected]",
         ),
       ),
     ),

drawer.png

8. backgroundColor 内容的背景颜色，默认使用的是 ThemeData.scaffoldBackgroundColor
9. bottomNavigationBar 显示在页面底部的导航栏

bottomNavigationBar:BottomNavigationBar(
          items:[
              BottomNavigationBarItem(
                icon: Icon(Icons.home),
                title: Text(
                  '首页',
                ),
              ),
              BottomNavigationBarItem(
                icon: Icon(Icons.home),
                title: Text(
                  '社区',
                ),
              ),
              BottomNavigationBarItem(
                icon: Icon(Icons.home),
                title: Text(
                  '我的',
                ),
              ),
          ],
        currentIndex:0,
      ),

bottomNavigationBar.png

10. bottomSheet 底部弹出框
11. resizeToAvoidBottomPadding 类似于 Android 中的android:windowSoftInputMode=”adjustResize”，控制界面内容 body 是否重新布局来避免底部被覆盖了，比如当键盘显示的时候，重新布局避免被键盘盖住内容。默认值为 true。
12. resizeToAvoidBottomInset 重新计算布局空间大小
13. primary 布局是否显示到顶部状态栏
14. drawerDragStartBehavior 默认为 DragStartBehavior.down ，还有一种为
DragStartBehavior.start ，暂时不知道啥作用。
15. extendBody 暂时不知道啥作用。
16. drawerScrimColor Drawer 展开后剩余空间的颜色，可是 30% 透明那种

最后代码 ：

Scaffold(
      appBar: AppBar(
        leading: null,
        automaticallyImplyLeading : false,
        title: Text(widget.title),
        actions: [
          IconButton(
            icon: Icon(Icons.ac_unit),
            onPressed: (){

            },
          ),
          new PopupMenuButton(
              itemBuilder: (BuildContext context) => >[
                new PopupMenuItem(child: new Text("我的")),
                new PopupMenuItem(child: new Text("设置")),
                new PopupMenuItem(child: new Text("钱包")),
              ]
          )
        ],
        elevation: 10,
        shape: new RoundedRectangleBorder(borderRadius: BorderRadius.circular(10.0),side: new BorderSide(
          style: BorderStyle.none,
        )),
        backgroundColor:Colors.green,
        brightness: Brightness.light,
        iconTheme: IconTheme.of(context).copyWith(color: Colors.black),
        actionsIconTheme: IconTheme.of(context).copyWith(color: Colors.black),
        textTheme: Theme.of(context).textTheme.apply(fontSizeFactor: 1.2),
        primary:true,
        centerTitle: true,
        titleSpacing:10,
        toolbarOpacity:1.0,
        bottomOpacity :0.5,
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            Text(
              'Hello Flutter',
            ),
          ],
        ),
      ),
      floatingActionButton: FloatingActionButton(
        child: Icon(Icons.add),
        tooltip: 'Increment',
        foregroundColor: Colors.cyanAccent,
        backgroundColor: Colors.green,
        focusColor: Colors.red,
        hoverColor:Colors.black,
        onPressed: _showMessage,
        shape :const CircleBorder(),
        clipBehavior: Clip.none,
        focusNode:  _node,
        isExtended: true,
      ),
      floatingActionButtonLocation: FloatingActionButtonLocation.centerFloat,
      floatingActionButtonAnimator:FloatingActionButtonAnimator.scaling,
      persistentFooterButtons:[
        Text('取消'),
        Text('确定')
      ],
      drawer: new Drawer(
        child: new UserAccountsDrawerHeader(
          accountName: new Text(
            "Flutter",
          ),
          accountEmail: new Text(
            "[email protected]",
          ),
        ),
      ),
      bottomNavigationBar:BottomNavigationBar(
          items:[
              BottomNavigationBarItem(
                icon: Icon(Icons.home),
                title: Text(
                  '首页',
                ),
              ),
              BottomNavigationBarItem(
                icon: Icon(Icons.home),
                title: Text(
                  '社区',
                ),
              ),
              BottomNavigationBarItem(
                icon: Icon(Icons.home),
                title: Text(
                  '我的',
                ),
              ),
          ],
        currentIndex:0,
      ),
      bottomSheet:Text('底部弹出框'),
      primary:true,
      drawerDragStartBehavior: DragStartBehavior.down,
      extendBody: true,
      drawerScrimColor: Color.fromARGB(50, 0, 0, 0),
    );

效果为:

效果1.png

效果图2.png