Flutter教学目录持续更新中
github源代码持续更新中
1.Scaffold介绍
Scaffold：Material Design布局结构的基本实现。提供展示抽屉（drawers，比如：侧边栏）、通知（snack bars） 以及 底部按钮（bottom sheets）。
2.主要的属性
- appBar：显示在界面顶部的一个 AppBar
- body：当前界面所显示的主要内容
- floatingActionButton： 在 Material 中定义的一个功能按钮。
- persistentFooterButtons：固定在下方显示的按钮。
- drawer：侧边栏控件
- bottomNavigationBar：显示在底部的导航栏按钮栏。
- backgroundColor：背景颜色
- resizeToAvoidBottomPadding： 控制界面内容 body
是否重新布局来避免底部被覆盖了，比如当键盘显示的时候，重新布局避免被键盘盖住内容。默认值为 true。
3.Scaffold实现一个简单的页面
appBar：顶部栏，类似安卓的ToolBar，可以设置标题内容，左右的action，以及标题下方内容，tabBar就可以在这里实现
bottomNavigationBar：可以用来实现底部导航，一般可以用bottomNavigationBar也可以用BottomAppBar都是可以的
这里的页面实现的时候就需要继承StatefulWidget了，因为StatelessWidget是不能刷新状态
1600653618517.jpg
页面自上而下就是appBar，body，persistentFooterButtons，bottomNavigationBar
1600653806496.jpg
这里侧滑栏设置的是右边的
具体代码如下：
Scaffold(
appBar: AppBar(
title: Text('Scaffold'),
centerTitle: true,
elevation: 10,
// leading: Icon(Icons.arrow_back),
// actions: [Icon(Icons.more_vert)],
bottom: PreferredSize(
child: Container(
height: 50.0,
child: Center(
child: Text('显示在标题下面的内容'),
),
decoration: BoxDecoration(
color: Colors.white,
),
),
preferredSize: Size.fromHeight(50.0),
),
),
backgroundColor: Colors.grey.shade400,
body: Center(
child: Text('''
Scaffold：Material Design布局结构的基本实现。此类提供了用于显示drawer、SnackBar和底部sheet的API。
'''),
),
//定义悬浮按钮
floatingActionButton: FloatingActionButton(
child: Icon(Icons.add),
//点击事件
onPressed: () {
print("点击了 FloatingActionButton");
},
),
//用来控制 FloatingActionButton 的位置
//FloatingActionButtonLocation.endFloat 默认使用 浮动右下角
//FloatingActionButtonLocation.endDocked 右下角
//FloatingActionButtonLocation.endTop 右上角
//FloatingActionButtonLocation.startTop 左上角
//FloatingActionButtonLocation.centerFloat 底部中间浮动
//FloatingActionButtonLocation.centerDocked 底部中间不浮动
floatingActionButtonLocation: FloatingActionButtonLocation.endFloat,
endDrawer: Container(
width: 200,
height: double.infinity,
color: Colors.white,
child: Center(
child: Text('endDrawer'),
),
),
persistentFooterButtons: [
Icon(Icons.person),
Icon(Icons.add),
Icon(Icons.print),
Icon(Icons.apps),
Icon(Icons.chat),
],
bottomNavigationBar: BottomNavigationBar(
items: [
BottomNavigationBarItem(
icon: Icon(
Icons.home,
color: _index == 0 ? Colors.blue : Colors.grey,
),
title: Text(
"首页",
style: TextStyle(
fontSize: _index == 0 ? 14 : 12,
color: _index == 0 ? Colors.blue : Colors.grey,
),
),
),
BottomNavigationBarItem(
icon: Icon(
Icons.mail,
color: _index == 1 ? Colors.blue : Colors.grey,
),
title: Text(
"邮件",
style: TextStyle(
fontSize: _index == 1 ? 14 : 12,
color: _index == 1 ? Colors.blue : Colors.grey,
),
),
),
BottomNavigationBarItem(
icon: Icon(
Icons.people,
color: _index == 2 ? Colors.blue : Colors.grey,
),
title: Text(
"我的",
style: TextStyle(
fontSize: _index == 2 ? 14 : 12,
color: _index == 2 ? Colors.blue : Colors.grey,
),
),
)
],
//BottomNavigationBar 的点击事件
onTap: (flag) {
print("flag = $flag");
_index = flag;
setState(() {});
},
//当前位置
currentIndex: _index,
),
4.floatingActionButtonLocation
这个属性是控制悬浮按钮显示的位置的
- FloatingActionButtonLocation.endFloat 默认使用 浮动右下角
- FloatingActionButtonLocation.endDocked 右下角
- FloatingActionButtonLocation.endTop 右上角
- FloatingActionButtonLocation.startTop 左上角
- FloatingActionButtonLocation.centerFloat 底部中间浮动
- FloatingActionButtonLocation.centerDocked 底部中间不浮动
5.Scaffold中显示SnackBar或者BottomSheet
代码很简单：Scaffold.of(context).showSnackBar(snackBar);
Scaffold.of(context).showBottomSheet(bottomSheet);但是要注意的是这样直接用是没有效果的，因为直接使用构建Scaffold的BuildContext去显示是无效的，我们需要创建一个新的Builder使用新的context去显示出来，这样就可以成功显示出来了
1600654648198.jpg
floatingActionButton: Builder(builder: (context) {
return FloatingActionButton(
child: Icon(
Icons.add,
color: Colors.white,
),
onPressed: () {
var snackBar = SnackBar(
content: Text('snackBar内容,显示时长1S'),
backgroundColor: Colors.black54,
duration: Duration(seconds: 1),
action: SnackBarAction(
label: 'SnackBarAction',
onPressed: () {
ToastUtil.showToast('SnackBarAction');
}),
);
Scaffold.of(context).showSnackBar(snackBar);
// Scaffold.of(context).showBottomSheet(bottomSheet);
},
backgroundColor: Colors.blue,
);
}),
6.bottomNavigationBar
这里对bottomNavigationBar再说一点，这个官方还提供了一些酷炫的的效果
1600654935270.jpg
bottomNavigationBar: BottomAppBar(
color: Colors.white,
elevation: 10,
shape: CircularNotchedRectangle(),
child: Container(
height: 60,
child: Row(children: [
Expanded(
child: Text(
'首页',
textAlign: TextAlign.center,
)),
Expanded(
child: Text(
'资讯',
textAlign: TextAlign.center,
)),
Expanded(child: SizedBox()),
Expanded(
child: Text(
'消息',
textAlign: TextAlign.center,
)),
Expanded(
child: Text(
'个人',
textAlign: TextAlign.center,
)),
]),
),
),
好了关于Scaffold就讲解到这里，下一节：基础组件之Appbar
网友评论