Flutter中Scaffold布局的使用详解及实例代码_flutter scaffold title 中间

Flutter中Scaffold布局的使用详解及实例代码

Scaffold实现了基本的Material布局。只要是在Material中定义了的单个界面显示的布局控件元素，都可以使用Scaffold来绘制。

继承关系：Object > Diagnosticable > DiagnosticableTree > Widget > StatefulWidget > Scaffold。

源码

/// See also:
///
///  * [AppBar], which is a horizontal bar typically shown at the top of an app
///    using the [appBar] property.
///  * [BottomAppBar], which is a horizontal bar typically shown at the bottom
///    of an app using the [bottomNavigationBar] property.
///  * [FloatingActionButton], which is a circular button typically shown in the
///    bottom right corner of the app using the [floatingActionButton] property.
///  * [Drawer], which is a vertical panel that is typically displayed to the
///    left of the body (and often hidden on phones) using the [drawer]
///    property.
///  * [BottomNavigationBar], which is a horizontal array of buttons typically
///    shown along the bottom of the app using the [bottomNavigationBar]
///    property.
///  * [SnackBar], which is a temporary notification typically shown near the
///    bottom of the app using the [ScaffoldState.showSnackBar] method.
///  * [BottomSheet], which is an overlay typically shown near the bottom of the
///    app. A bottom sheet can either be persistent, in which case it is shown
///    using the [ScaffoldState.showBottomSheet] method, or modal, in which case
///    it is shown using the [showModalBottomSheet] function.
///  * [ScaffoldState], which is the state associated with this widget.
///  * <https://material.io/design/layout/responsive-layout-grid.html>
class Scaffold extends StatefulWidget {
  /// Creates a visual scaffold for material design widgets.
  const Scaffold({
    Key key,
    this.appBar, //通常显示在应用程序顶部的水平条
    this.body, // 当前界面所显示的主要内容。
    this.floatingActionButton, //悬浮按钮，右下角按钮
    this.floatingActionButtonLocation,//悬浮按钮位置
    this.floatingActionButtonAnimator, //悬浮按钮在[floatingActionButtonLocation]出现/消失动画
    this.persistentFooterButtons,//在底部呈现一组button，显示于[bottomNavigationBar]之上，[body]之下
    this.drawer,//一个垂直面板，显示于左侧，初始处于隐藏状态，“抽屉”菜单效果
    this.endDrawer,
    this.bottomNavigationBar,//出现于底部的一系列水平按钮，实现底部类似tabBar效果
    this.bottomSheet,//底部持久化提示框
    this.backgroundColor,//内容背景颜色
    this.resizeToAvoidBottomPadding,//弃用，使用[resizeToAvoidBottomInset]
    this.resizeToAvoidBottomInset,//重新计算布局空间大小
    this.primary = true,//是否填充顶部（状态栏）
    this.drawerDragStartBehavior = DragStartBehavior.start,
    this.extendBody = false,
    this.extendBodyBehindAppBar = false,
    this.drawerScrimColor,
    this.drawerEdgeDragWidth,
    this.drawerEnableOpenDragGesture = true,
    this.endDrawerEnableOpenDragGesture = true,
  }) : assert(primary != null),
       assert(extendBody != null),
       assert(extendBodyBehindAppBar != null),
       assert(drawerDragStartBehavior != null),
       super(key: key);

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53

Scaffold主要的属性说明

• appBar：显示在界面顶部的一个 AppBar。
• body：当前界面所显示的主要内容。
• floatingActionButton： 在Material中定义的一个功能按钮。
• persistentFooterButtons：固定在下方显示的按钮。
• drawer：一个垂直面板，显示于左侧，初始处于隐藏状态，“抽屉”菜单效果。
• bottomNavigationBar：显示在底部的导航栏按钮栏。
• backgroundColor：背景颜色。
• resizeToAvoidBottomPadding： 控制界面内容body是否重新布局来避免底部被覆盖了，比如当键盘显示的时候，重新布局避免被键盘盖住内容，默认值为 true。

示例代码

我们将以一个实例来说明Scaffold的使用方式。

class _MyHomePageState extends State<MyHomePage> {
  int bottomSelect = 0;
  List<String> tabNames = ["主页", "图片", "我的"];
  String currentTab = "主页";
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        backgroundColor: Colors.green,//设置标题栏的背景颜色
        title: new Title(
          child:new Text(
            '这是一个标题',
            style: new TextStyle(
              fontSize: 20.0,
              color: Colors.white,
            ),
          ),
          color: Colors.white,
        ),
        centerTitle: true,//设置标题居中
        elevation: 10.0,//设置标题栏下面阴影的高度
        leading: new Builder(
            builder: (BuildContext context){
              return new GestureDetector(//设置事件
                child: new Icon(//设置左边的图标
                  Icons.account_circle,//设置图标内容
                  color: Colors.white,//设置图标的颜色
                ),
                onTap:(){
                  Scaffold.of(context).showSnackBar(
                      new SnackBar(content: new Text('点击'))
                  );
                },
                onLongPress: (){
                  Scaffold.of(context).showSnackBar(
                      new SnackBar(content: new Text('长按'))
                  );
                },
                onDoubleTap: (){
                  Scaffold.of(context).showSnackBar(
                      new SnackBar(content: new Text('双击'))
                  );
                },
              );
            }
        ),
        brightness:Brightness.light,//设置状态栏的字体颜色(白色/黑色)
        primary: true,//是否设置内容避开状态栏
        actions: <Widget>[
          new Padding(
            child: new Icon(
                Icons.add,
                color: Colors.white
            ),
            padding: EdgeInsets.all(10.0),
          ),
        ],
      ),
      body: ListView.builder(
          itemCount: listCount,
          itemBuilder: (context, index) {
            return new Card(
                child: new ListTile(
                  leading: new Icon(Icons.phone),
                  title: new Text("卜大爷 $currentTab $index"),
                  subtitle: new Text("010-12345678"),
                  trailing: new Icon(Icons.arrow_forward_ios),
                  contentPadding: EdgeInsets.symmetric(horizontal: 20.0),
                ));
          }),
      //底部固定的widget
      persistentFooterButtons: <Widget>[
        new Icon(Icons.add_shopping_cart),
      ],
      //侧边栏
      drawer: new Drawer(
        child:ListView.builder(
            itemCount: listCount,
            itemBuilder: (context, index) {
              return new Card(
                  child: new ListTile(
                    leading: new Icon(Icons.phone),
                    title: new Text("我是抽屉菜单 $index"),
                    subtitle: new Text("010-12345678"),
                    trailing: new Icon(Icons.arrow_forward_ios),
                    contentPadding: EdgeInsets.symmetric(horizontal: 20.0),
                  ));
            })
      ),
      //底部导航栏
      bottomNavigationBar: new BottomNavigationBar(
        currentIndex: bottomSelect,//默认选中的位置
        fixedColor: Colors.green,//选中的颜色
        items:<BottomNavigationBarItem>[
          new BottomNavigationBarItem(
            icon:new Icon(
              Icons.home,
            ),
            activeIcon: new Icon(//选中显示的icon
              Icons.home,
            ),
            title: new Text(
              tabNames[0],
            ),
          ),
          new BottomNavigationBarItem(
            icon:new Icon(
              Icons.picture_in_picture,
            ),
            title: new Text(
              tabNames[1],
            ),
          ),
          new BottomNavigationBarItem(
            icon:new Icon(
              Icons.account_box,
            ),
            title: new Text(
              tabNames[2],
            ),
          ),
        ] ,
        onTap: (int index){
          setState(() {
            bottomSelect = index;
            currentTab = tabNames[index];
            print(index.toString());
          });
        },
      ),
    );
  }
  int listCount = 10;//当前列表显示的子item数量
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134