​Flutter 之Scaffold详解

Flutter 之Scaffold详解

Scaffold 实现了基本的 Material Design 布局结构。在 Material 设计中定义的单个界面上的各种布局元素，在 Scaffold 中都支持。

Scaffold 有下面几个主要属性：

appBar - 显示在界面顶部的一个 AppBar。

代码：

appBar: AppBar(

title: Text("hello!"),

),

效果：

简单的AppBar效果

body - 当前界面所显示的主要内容 Widget。

代码：

body: Text("hello"),

效果：

简单的字符串body效果

floatingActionButton - Material 设计中所定义的 FAB，界面的主要功能按钮。

代码：

floatingActionButton: FloatingActionButton(

child: Icon(Icons.add),

),

效果：

floatingActionButton

floatingActionButtonLocation - 悬浮按钮显示位置。六种显示位置：centerDocked 居中停靠centerFloat 居中悬浮endDocked 右铡停靠endFloat 右侧悬浮endTop 右上悬浮miniStartTop 左上悬浮startTop 左上悬浮persistentFooterButtons - 固定在下方显示的按钮，比如对话框下方的确定、取消按钮。

代码：

persistentFooterButtons: [

RaisedButton(

child: Text("确定"),

),

RaisedButton(

child: Text("取消"),

)]

效果：

固定在下方显示的按钮

drawer - 抽屉菜单控件。

代码：

drawer: ListView(

children:[

Container(height:50),

Container(

color:Colors.white,

child: ListTile(

leading: new CircleAvatar(child: new Text("A")),

title: new Text('Drawer item A'),

onTap: () => {},

),),

Container(

color:Colors.white,

child: ListTile(

leading: new CircleAvatar(child: new Text("B")),

title: new Text('Drawer item B'),

//subtitle: new Text("Drawer item B subtitle"),

onTap: () => {},

),),],),

效果：

抽屉菜单效果

backgroundColor - 内容的背景颜色，默认使用的是 ThemeData.scaffoldBackgroundColor 的值。

代码：

backgroundColor: Colors.red,

效果：

修改背景颜色

bottomNavigationBar - 显示在页面底部的导航栏。

代码：

bottomNavigationBar: new BottomNavigationBar(

items:[

new BottomNavigationBarItem(

icon: Icon(Icons.home),

title: Text("家")),

new BottomNavigationBarItem(

icon: Icon(Icons.hotel),

title: Text("旅馆")),

],

type: BottomNavigationBarType.fixed,),

效果：

底部导航栏

resizeToAvoidBottomPadding - 控制界面内容 body 是否重新布局来避免底部被覆盖了，比如当键盘显示的时候，重新布局避免被键盘盖住内容。默认值为 true。

bottomSheet- 底部滑出组件

代码：

bottomSheet: new MaterialButton(

color: Colors.blue,

child: new Text('点我'),

onPressed: () {

showModalBottomSheet(

context: context,

builder: (BuildContext context) {

return new Container(

height: 300.0,

child: Icon(Icons.terrain),

);

},

).then((val) {

print(val);

});

},

),

效果：

底部滑出