1. 基本介紹
Scaffold 提供了比較常見的頁面屬性。
| Scaffold屬性 | 介紹 |
|---|---|
| appBar | 頁面上方導(dǎo)航條 |
| body | 頁面容器 |
| floatingActionButton | 懸浮按鈕 |
| floatingActionButtonLocation | 懸浮按鈕位置 |
| floatingActionButtonAnimator | 懸浮按鈕動(dòng)畫 |
| persistentFooterButtons | 顯示在底部導(dǎo)航條上方的一組按鈕 |
| drawer | 左側(cè)菜單 |
| endDrawer | 右側(cè)菜單 |
| bottomNavigationBar | 底部導(dǎo)航條 |
| bottomSheet | 一個(gè)持久停留在body下方，底部控件上方的控件 |
| backgroundColor | 背景色 |
| resizeToAvoidBottomPadding | 已廢棄，resizeToAvoidBottomInset作為替代 |
| resizeToAvoidBottomInset | 默認(rèn)為 true，防止一些小組件重復(fù) |
| primary | 是否在屏幕頂部顯示Appbar, 默認(rèn)為 true，Appbar 是否向上延伸到狀態(tài)欄，如電池電量，時(shí)間那一欄 |
| drawerDragStartBehavior | 控制 drawer 的一些特性 |
| extendBody | body 是否延伸到底部控件 |
| extendBodyBehindAppBar | 默認(rèn) false，為 true 時(shí)，body 會(huì)置頂?shù)?appbar 后，如appbar 為半透明色，可以有毛玻璃效果 |
| drawerScrimColor | 側(cè)滑欄拉出來時(shí)，用來遮蓋主頁面的顏色 |
| drawerEdgeDragWidth | 側(cè)滑欄拉出來的寬度 |
| drawerEnableOpenDragGesture | 左側(cè)側(cè)滑欄是否可以滑動(dòng) |
| endDrawerEnableOpenDragGesture | 右側(cè)側(cè)滑欄是否可以滑動(dòng) |
2. 示例代碼
代碼下載地址。如果對(duì)你有幫助的話記得給個(gè)關(guān)注，代碼會(huì)根據(jù)我的 Flutter 專題不斷更新。
3. Scaffold 組件
3.1 創(chuàng)建容器
優(yōu)雅的編程，首先創(chuàng)建一個(gè) 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
我們給這個(gè)按鈕增加一個(gè)返回事件，避免在使用其他屬性時(shí)，導(dǎo)致頁面缺失返回事件。
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 可以通過點(diǎn)擊左上角，右上角按鍵觸發(fā)，也可以左滑，右滑觸發(fā)。
drawerEnableOpenDragGesture 默認(rèn)為 true，設(shè)置 drawer 是否右滑觸發(fā)
endDrawerEnableOpenDragGesture 默認(rèn)為 true，設(shè)置 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. 技術(shù)小結(jié)
- 了解 Scaffold 提供了哪些控件。
- Scaffold 屬性介紹。
- 基礎(chǔ) Scaffold 控件的使用。
- 基礎(chǔ) Scaffold 的布局效果。
