感君一回顾,思君朝与暮。
本文部分图片和文字介绍转载于 https://www.jianshu.com/p/a0fcb755a7b8
Scaffold
- Scaffold 实现了基本的 Material 布局。只要是在 Material 中定义了的单个界面显示的布局控件元素,都可以使用 Scaffold 来绘制。
提供展示抽屉(drawers,比如:左边栏)、通知(snack bars) 以及 底部按钮(bottom sheets)。
我们可以将 Scaffold 理解为一个布局的容器。可以在这个容器中绘制我们的用户界面。
Scaffold({
Key key,
this.appBar,/// 一个appBar Widget
this.body,/// 页面的内容,widget 通常为 Container
this.floatingActionButton,/// android Material design 设计中的 button 通常悬浮在屏幕右下角
this.floatingActionButtonLocation,/// button 的位置
this.floatingActionButtonAnimator,///button 的动画
this.persistentFooterButtons,/// 存在于底部 navigationbar与 body之间的一个按钮list, Widget[]
//在源码中看到了手动打开抽屉的方法 Scaffold.of(context).openDrawer();
this.drawer,///抽屉匣 侧滑菜单,类似手机qq的侧滑菜单 默认隐藏 左边
this.endDrawer,///抽屉匣 侧滑菜单,类似手机qq的侧滑菜单 默认隐藏 右边
this.bottomNavigationBar,///底部切换菜单,在android上通常与viewpage一起使用的切换按钮
///bottomSheet 类似 CoordinatorLayout 中的 使用了 BottomSheetBehavior 的布局,暂时没发现有手动隐藏的方法
///想要手动隐藏,可以自己创建 showBottomSheet 或者 showModalBottomSheet 这两个,前者打开的是一个背景透明的bottomsheet 后面则是背景为灰色的bottomsheet
///手动关闭方法 Navigator.of(context).pop(context);
this.bottomSheet,
this.backgroundColor,///背景色
this.resizeToAvoidBottomPadding,////已废弃,resizeToAvoidBottomInset作为替代
this.resizeToAvoidBottomInset,///是否重新计算布局,类似 windowsoftinput 属性中的额adjustReside 默认为 true,防止一些小组件重复
this.primary =true,///是否从屏幕的顶部开始布局,即在状态栏的底部开始
///DragStartBehavior.start 开始触摸事件时 drawer就响应关闭或者打开事件,
///如果这只为 DragStartBehavior.down 则会在第一个事件结束是响应打开或关闭抽屉匣 drawer
///但是在实际使用过程中给我的感受并没有很大差别, 官方推荐 start 更顺滑
this.drawerDragStartBehavior = DragStartBehavior.start,
///如果为true 则body的高度将不再是在bottomnavagationbar上面或者persistentFooterButtons这个上面了,而是整个父控件的底部
///这样做的好处是如果你的bottomnavagationbar是不规则的矩形的时候,可以保证最大程度的看到你的body,不响应美观
this.extendBody =false,
///此属性同上,但是上面说的是底部,这个说的是顶部
this.extendBodyBehindAppBar =false,
this.drawerScrimColor,///当侧边抽屉被打开的时候,用来填充抽屉没有覆盖的部分的背景颜色
this.drawerEdgeDragWidth,///侧边栏预留打开抽屉的有效距离
this.drawerEnableOpenDragGesture =true,///左侧菜单栏是否可以拖动
this.endDrawerEnableOpenDragGesture =true,///右侧菜单栏是否可拖动
})
创建容器
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,
);
}
}
1. AppBar
image2. 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 可以改变按钮位置,可以自行尝试。
image
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,
),
];
}
image
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(),
),
);
}
image
image
image
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'),
),
],
);
}
image
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,
);
},
);
image
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,
),
);
}
image
网友评论