Flutter 学习之旅(七) 基础控件 Scaffold
Flutter一般用Scaffold作为一个页面的起始脚手架,Scaffold 还是非常重要的,所以说他的每一个属性有非常有必要的研究一下，然后在Scaffold配置一个AppBar标题栏,今天我们就来说道说道这两个东西,好好看一下他们的构造方和使用方式,
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,////貌似这个现在不推荐使用了,
this.resizeToAvoidBottomInset,///是否重新计算布局,类似 windowsoftinput 属性中的额adjustReside
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,///右侧菜单栏是否可拖动
})
这里面会遇到一些常用的问题,比如当你的app 编译打包成功后屏幕上的Text 的内容会有两个横线在文字下方,或者控件是从状态栏同一高度开始布局的,这些问题都是你没有在页面的外面签到 Scaffold 导致的,
既然这里有关于状态栏的高度,那么获取状态栏高度的方法是
////这个方法不需要BuildContext ,简单粗暴
MediaQueryData.fromWindow(WidgetsBinding.instance.window).padding.top; 这个就是状态栏的高度,在scafflod的源码中可以找到
源码在
build(BuildContext context) 方法里面,源码为
if(appbar!=null){
final double topPadding =widget.primary ? mediaQuery.padding.top :0.0;
}
正好用到了上面标明的primary 这个属性,如果primary 为true 则 topPadding 则是从状态栏下面开始,否则从屏幕的最顶端开始,
image
Scaffold 结构示意图
手动显示SnackBar方法,
image
SnackBar 中感觉就一个看着和其他控件不太一样的地方,就是lable 其实就是该动作的显示,
BottomSheet
上面提到过showBottomSheet 和 showModalBottomSheet
在使用时我发现了一个小坑,就是创建 showModalBottomSheet 可以在Scaffold 的 navigationBottomBar 中或者 Appbar中使用action 的点击事件创建 但是showBottomSheet 就不可以,只能用Scaffold 的body中的控件才能创建
image
前面那种图片上是bottomSheet的,和android中bottomsheet的用法和展示效果还是比较接近的,
第二个是ModalBottomSheet 与android 中 BottomSheetDialog的展示比较类似,
看源码中的案例找到了手动关闭他们的方法
Navigator.of(context).pop(context); 貌似这个方法就是flutter 关闭页面的方法 ,pop方法入参会被携带到之前的页面,类似startActivitOnResult中得到的结果
同时发现ModalBottomSheet 有whenComplete(),也就是当关闭的时候调用而bottomSheet没有,
所以我个人理解为bottomSheet 是作为菜单使用的,而ModalBottomSheet 这个是可以作为dialog使用的,
关于部分应用设计的上面圆角,这个在后面会介绍到,但是这里说一下实现方法,给内部Container 设置 decoration ,decoration 类似android中的darw文件,可以给view设置形状
我学习flutter的整个过程都记录在里面了
https://www.jianshu.com/c/36554cb4c804
最后附上demo 地址
