1. 基本介紹
Scaffold 提供了比較常見的頁面屬性按摘。
| Scaffold屬性 | 介紹 |
|---|---|
| appBar | 頁面上方導航條 |
| body | 頁面容器 |
| floatingActionButton | 懸浮按鈕 |
| floatingActionButtonLocation | 懸浮按鈕位置 |
| floatingActionButtonAnimator | 懸浮按鈕動畫 |
| persistentFooterButtons | 顯示在底部導航條上方的一組按鈕 |
| drawer | 左側菜單 |
| endDrawer | 右側菜單 |
| bottomNavigationBar | 底部導航條 |
| bottomSheet | 一個持久停留在body下方腔寡，底部控件上方的控件 |
| backgroundColor | 背景色 |
| resizeToAvoidBottomPadding | 已廢棄，resizeToAvoidBottomInset作為替代 |
| resizeToAvoidBottomInset | 默認為 true院塞，防止一些小組件重復 |
| primary | 是否在屏幕頂部顯示Appbar, 默認為 true体斩，Appbar 是否向上延伸到狀態(tài)欄剿吻，如電池電量，時間那一欄 |
| drawerDragStartBehavior | 控制 drawer 的一些特性 |
| extendBody | body 是否延伸到底部控件 |
| extendBodyBehindAppBar | 默認 false讯檐，為 true 時，body 會置頂到 appbar 后染服，如appbar 為半透明色别洪，可以有毛玻璃效果 |
| drawerScrimColor | 側滑欄拉出來時，用來遮蓋主頁面的顏色 |
| drawerEdgeDragWidth | 側滑欄拉出來的寬度 |
| drawerEnableOpenDragGesture | 左側側滑欄是否可以滑動 |
| endDrawerEnableOpenDragGesture | 右側側滑欄是否可以滑動 |
2. 示例代碼
代碼下載地址肌索。如果對你有幫助的話記得給個關注蕉拢，代碼會根據我的 Flutter 專題不斷更新。
3. Scaffold 組件
3.1 創(chuàng)建容器
優(yōu)雅的編程诚亚，首先創(chuàng)建一個 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<FMScaffoldVC> {
@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<Widget> _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 可以通過點擊左上角夷家，右上角按鍵觸發(fā)，也可以左滑敏释，右滑觸發(fā)库快。
drawerEnableOpenDragGesture 默認為 true，設置 drawer 是否右滑觸發(fā)
endDrawerEnableOpenDragGesture 默認為 true钥顽，設置 endDrawer 是否左滑觸發(fā)
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 的布局效果兄墅。
