Scaffold 详解

太过爱你忘了你带给我的痛 2021-09-13 15:30 454阅读 0赞

**一、主要的属性说明**

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

**运行后的第一个页面，每个部位含义在代码均有解释**  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3hzal9ibG9n_size_16_color_FFFFFF_t_70]  
**从屏幕左侧往右滑，出现侧边栏**  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3hzal9ibG9n_size_16_color_FFFFFF_t_70 1]  
**点击右下角红圈白色的 + 按钮（即FAB 按钮），将显示 SnackBar、撤销 字样**  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3hzal9ibG9n_size_16_color_FFFFFF_t_70 2]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3hzal9ibG9n_size_16_color_FFFFFF_t_70]: /images/20210913/65f6af2046d7472f98f094cec7741e8e.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3hzal9ibG9n_size_16_color_FFFFFF_t_70 1]: /images/20210913/ed42b2c2e4d346b2a496c2b0b1020f0d.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3hzal9ibG9n_size_16_color_FFFFFF_t_70 2]: /images/20210913/813f89d583b44b71b0fac80405be52fd.png