1. 基本介绍
Scaffold 提供了比较常见的页面属性。
| Scaffold属性 | 介绍 |
|---|---|
| appBar | 页面上方导航条 |
| body | 页面容器 |
| floatingActionButton | 悬浮按钮 |
| floatingActionButtonLocation | 悬浮按钮位置 |
| floatingActionButtonAnimator | 悬浮按钮动画 |
| persistentFooterButtons | 显示在底部导航条上方的一组按钮 |
| drawer | 左侧菜单 |
| endDrawer | 右侧菜单 |
| bottomNavigationBar | 底部导航条 |
| bottomSheet | 一个持久停留在body下方，底部控件上方的控件 |
| backgroundColor | 背景色 |
| resizeToAvoidBottomPadding | 已废弃，resizeToAvoidBottomInset作为替代 |
| resizeToAvoidBottomInset | 默认为 true，防止一些小组件重复 |
| primary | 是否在屏幕顶部显示Appbar, 默认为 true，Appbar 是否向上延伸到状态栏，如电池电量，时间那一栏 |
| drawerDragStartBehavior | 控制 drawer 的一些特性 |
| extendBody | body 是否延伸到底部控件 |
| extendBodyBehindAppBar | 默认 false，为 true 时，body 会置顶到 appbar 后，如appbar 为半透明色，可以有毛玻璃效果 |
| drawerScrimColor | 侧滑栏拉出来时，用来遮盖主页面的颜色 |
| drawerEdgeDragWidth | 侧滑栏拉出来的宽度 |
| drawerEnableOpenDragGesture | 左侧侧滑栏是否可以滑动 |
| endDrawerEnableOpenDragGesture | 右侧侧滑栏是否可以滑动 |
2. 示例代码
代码下载地址。如果对你有帮助的话记得给个关注，代码会根据我的 Flutter 专题不断更新。
3. Scaffold 组件
3.1 创建容器
优雅的编程，首先创建一个 scaffold.dart 文件。
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,
);
}
}
3.2 AppBar
scaffold appBar.png
3.3 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 可以改变按钮位置，可以自行尝试。
scaffold floatingActionButton.png
3.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,
),
];
}
scaffold persistentFooterButtons.png
3.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(),
),
);
}
scaffold drawer home.png
scaffold drawer.png
scaffold enddrawer.png
3.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'),
),
],
);
}
scaffold bottomNavigationBar.png
3.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,
);
},
);
scaffold bottomSheet.png
3.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,
),
);
}
scaffold backgroundColor.png
3.8 其他属性
还有一些 bool 值属性，用的场景较少，有需要的自行了解。
4. 技术小结
- 了解 Scaffold 提供了哪些控件。
- Scaffold 属性介绍。
- 基础 Scaffold 控件的使用。
- 基础 Scaffold 的布局效果。