Flutter生命周期 :
和其他框架中视图比如Android的Activity一样,flutter中的视图Widget也存在生命周期,生命周期的回调函数体现在了State上面,理解flutter的生命周期,对我们写一个合理的控件至关重要。组件State生命周期整理如下:
initState, didChangeDependencies, bulid, reassemble, didUpdateWidget, deactivate, dispose,
其实总结下来大致可以分为三个阶段,初始化(插入渲染树),状态改变(在渲染树中存在),销毁(从渲染树中移除)
生命周期initstate:
其实这个函数不属于生命周期,因为这个时候state的widget属性还是空的,如果在构造函数中访问widget属性是行不通的,但是构造函数必然是第一个要调用的。当插入渲染树的时候调用,这个函数在生命周期中值调用一次,这里可以做一些初始化工作,比如初始化state的变量。
didChangeDependencies:
这个函数会紧跟在initState之后调用,并且可以调用BuildContext.inherFromWidgetOfExactType,那么BuildContext.inheritFromWidgetOfExactType的使用场景是什么呢?最经典的应用场景是?
跨组件拿到数据didUpdateWidget
当组件状态改变的时候回调用didUpdateWidget,比如调用了setState,实现上这里flutter框架回创建一个新的Widget,绑定State,并在这个函数中传递老的Widget,这个函数一般用于比较新、老Widget,看看那些属性改变了,并对State做出一些调整。需要注意的是,涉及controller的变更,需要在这个函数中移除老的controller的监听,并才创建新的controller监听。比如tabbar:
deactivate
在dispose之前,会调用这个函数。
dispose
一旦到这个阶段,组件就要被销毁了,这个函数一般是移除监听,清理环境。
概念认识
1,State
1,widget build时被读取
2,在widget生命周期中被改变,当state被改变时,可以手动调用setstate方法通知flutter状态发生改变,fromework在收到消息后,会重新调用build方法重新构建widget树,从而达到更新UI的目的。
两个常用属性:
1,widget state只会在第一次插入到树种时被创建。,
2,Context它是buildcontext 一个实例,每个widget都有自己的context对象。
2,Text
maxLines、overflow:指定文本显示的最大行数,默认情况下,文本是自动折行的,如果指定此参数,则文本最多不会超过指定的行。如果有多余的文本,可以通过overflow来指定截断方式,默认是直接截断,本例中指定的截断方式TextOverflow.ellipsis,它会将多余文本截断后以省略符“...”表示;TextOverflow的其它截断方式请参考SDK文档。
textScaleFactor:代表文本相对于当前字体大小的缩放因子,相对于去设置文本的样式style属性的fontSize,它是调整字体大小的一个快捷方式。该属性的默认值可以通过MediaQueryData.textScaleFactor获得,如果没有MediaQuery,那么会默认值将为1.0。
TextSpan : Text其实就是RichText的一个包装,而RichText是可以显示多种样式(富文本)的widget。_tapRecognizer,它是点击链接后的一个处理器(代码已省略),关于手势识别的更多内容我们将在后面单独介绍。
3,Button
通过定义的属性自定义按钮 注意material design中配有很多阴影4,图片和Icon
注意Fit选项 Material Design所有图标可以在其官网查看:https://material.io/tools/icons/ 字体图标ImageProvider 是一个抽象类,主要定义了图片数据获取的接口load(),从不同的数据源获取图片需要实现不同的ImageProvider ,如AssetImage是实现了从Asset中加载图片的ImageProvider,而NetworkImage实现了从网络加载图片的ImageProvider。
5,单选框和复选框
无法自定义,其他没有什么6,输入框和表单
其他属性 textfield获取输入内容 表单验证7,线性布局Row、Colum
注意一下排列顺序8,弹性布局Flex
Flex是row和column的父类 spacer的功能是制定比例的空间 实际上它是一个expanded一个包装9,流式布局 wrap ,Flow
wrap流式布局 很少使用,一般注意Wrap是否可以10,层叠布局 Stack Postioned 就像安卓中的Framelayout 允许堆叠
注意positioned属性报错11,Padding
注意edgeinset属性12,布局限制类容器ConstrainedBox和SizedBox
注意限制条件 取较大值13,DecoratedBox
绘制一个装饰的decoration14,Transform变换
Marix变换 rotate变换会影响子widget的位置和大小15,container
组合大杂烩16,Scaffold ,tabBar,底部导航
注意Physice17,SingleChildScrollview
注意primary18,Listview
listview 无限加载19,Gridview
注意gridDelegate Pub上有一个包“flutter_staggered_grid_view” ,它实现了一个交错GridView的布局模型,可以很轻松的实现这种布局,详情读者可以自行了解。20,滚动监听以及控制ScrollController
滚动监听 位置恢复 滚动监听发送通知21,导航返回WillPopScope
导航22,数据共享
注意和nitification相反23,主题
熟悉themedata数据 局部主题可以替换全局主题23,Pointer事件处理
flutter中使用listener监听原始触摸事件 枚举类 absorb和ignore不同点24,手势识别
点击,双击,长按 同时监听ontap和ondoubletap会有延时,只有ontap没有延时25,事件总线
事件总线 全局事件总线使用26,Notification
Notification 会沿着当前节点向上传递,多有父节点都可以通过NotificationListener来监听通知。这种由子向父的传递为通知冒泡。
dispatch27,通过组合现有Widget实现自定义
require标注28,CustomPaint与Canvas
custompaint属性 注意 两个参数 配置画笔属性 自绘性能29,Http请求
五步请求 注意生效的区域 安全问题 认证 代理 证书验证30,网络操作 Dio http库
dio dio内部 分块下载dio是一个强大的Dart Http请求库,支持Restful API、FormData、拦截器、请求取消、Cookie管理、文件上传/下载、超时等。
网友评论