Flutter之Widget生命周期

目录

    • 初始化
      • 构造函数
      • initState
      • didChangeDependencies
    • 运行时
      • build
      • didUpdateWidget
    • 组件移除
      • deactivate
      • dispose
      • reassemble
    • 函数生命周期说明:
    • 实际场景
    • App生命周期

前言:生命周期是一个组件加载到卸载的整个周期,熟悉生命周期可以让我们在合适的时机做该做的事情,
flutter中的State生命周期和android以及React Native的生命周期类似。

在这里插入图片描述
大致可以分为3个阶段:

  • 初始化
  • 运行时(状态变化)
  • 组件移除

初始化

State初始化时会依次执行 : 构造函数 > initState > didChangeDependencies > Widget build , 此时页面加载完成。

然后我们看一下每个函数的意义:

构造函数

调用次数:1次

这个函数严格意义上来讲不属于生命周期的一部分,因为这个时候State的widget属性为空,无法在构造函数中访问widget的属性 。但是构造函数必然是要第一个调用的。可以在这一部分接收前一个页面传递过来的数据。

initState

Called when this object is inserted into the tree.

调用次数:1次

当插入渲染树的时候调用,这个函数在生命周期中只调用一次。这里可以做一些初始化工作,比如初始化State的变量。

didChangeDependencies

Called when a dependency of this [State] object changes.

初始化时,在initState()之后立刻调用
当依赖的InheritedWidget rebuild,会触发此接口被调用
实测在组件可见状态变化的时候会调用

运行时

build

调用次数:多次

初始化之后开始绘制界面,当setState触发的时候会再次被调用

didUpdateWidget

Called whenever the widget configuration changes.

祖先节点rebuild widget时调用 .当组件的状态改变的时候就会调用didUpdateWidget.

理论上setState的时候会调用,但我实际操作的时候发现只是做setState的操作的时候没有调用这个方法。而在我改变代码hot reload时候会调用 didUpdateWidget 并执行 build…

实际上这里flutter框架会创建一个新的Widget,绑定本State,并在这个函数中传递老的Widget。
这个函数一般用于比较新、老Widget,看看哪些属性改变了,并对State做一些调整。

需要注意的是,涉及到controller的变更,需要在这个函数中移除老的controller的监听,并创建新controller的监听。

组件移除

组件移除,例如页面销毁的时候会依次执行:deactivate > dispose

deactivate

Called when this object is removed from the tree.

在dispose之前,会调用这个函数。当组件卸载时会先一步dispose调用。

dispose

Called when this object is removed from the tree permanently.

调用次数:1次

一旦到这个阶段,组件就要被销毁了,这个函数一般会移除监听,清理环境。

reassemble

hot reload调用

函数生命周期说明:

在这里插入图片描述

实际场景

假设我们从A页面跳转到B页面, 那么A,B页面的生命周期会是怎样的呢?

B页面进入初始化状态,依次执行4个函数:构造函数 > initState > didChangeDependencies > Widget build , 此时页面加载完成,进入运行态。
此时A页面依次执行deactivate > build函数。注意 此时A页面并未卸载。

然后我们假设B页面只有一个按钮,点击B页面中的按钮,改变按钮的文字,会执行widget的build方法 ,(理论上也应该执行didUpdateWidget,但我这里没有)。

这时,我们点击返回键从B页面返回到A页面。
A页面重新显示,B页面开始卸载。
那么A先执行activate > build , 然后B页面依次执行:deactivate > dispose 。
此时A页面进入运行态,B页面移除。

Tips:

下面内容来自咸鱼技术团队.

当ListView中的item滚动出可显示区域的时候,item会被从树中remove掉,此item子树中所有的state都会被dispose,state记录的数据都会销毁,item滚动回可显示区域时,会重新创建全新的state、element、renderobject

使用hot
reload功能时,要特别注意state实例是没有重新创建的,如果该state中存在一下复杂的资源更新需要重新加载才能生效,那么需要在reassemble()添加处理,不然当你使用hot
reload时候可能会出现一些意想不到的结果,例如,要将显示本地文件的内容到屏幕上,当你开发过程中,替换了文件中的内容,但是hot
reload没有触发重新读取文件内容,页面显示还是原来的旧内容.

didChangeDependencies有两种情况会被调用。

创建时候在initState 之后被调用

在依赖的InheritedWidget发生变化的时候会被调用

正常的退出流程中会执行deactivate然后执行dispose。但是也会出现deactivate以后不执行dispose,直接加入树中的另一个节点的情况。

这里的状态改变包括两种可能:1.通过setState内容改变 2.父节点的state状态改变,导致孩子节点的同步变化。

App生命周期

需要指出的是如果想要知道App的生命周期,那么需要通过WidgetsBindingObserver的didChangeAppLifecycleState 来获取。通过该接口可以获取是生命周期在AppLifecycleState类中。常用状态包含如下几个

在这里插入图片描述

一个实际场景中的例子:

在不考虑suspending的情况下:从后台切入前台生命周期变化如下: AppLifecycleState.inactive->AppLifecycleState.resumed;

从前台压后台生命周期变化如下: AppLifecycleState.inactive->AppLifecycleState.paused;

class _MyWalletScreenState extends State<MyWalletScreen>with WidgetsBindingObserver {void initState() {super.initState();WidgetsBinding.instance.addObserver(this);}void dispose() {WidgetsBinding.instance.removeObserver(this);super.dispose();}  void didChangeAppLifecycleState(AppLifecycleState state) async {if (state == AppLifecycleState.resumed) {getData();}}
}

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.hqwc.cn/news/139622.html

如若内容造成侵权/违法违规/事实不符,请联系编程知识网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

航天科技×辰安科技 打造智慧化工园区安全保障平台

近年来&#xff0c;国内化工园区安全事故频发&#xff0c;多起化工园区重特大事故造成了严重人员财产损失的同时&#xff0c;也重创了行业的整体发展。在智能制造和工业互联网的背景下&#xff0c;建设智慧化工园区&#xff0c;使用智能化手段实现安全生产是解决当前化工园区安…

【Overload游戏引擎细节分析】视图投影矩阵计算与摄像机

本文只罗列公式&#xff0c;不做具体的推导。 OpenGL本身没有摄像机(Camera)的概念&#xff0c;但我们为了产品上的需求与编程上的方便&#xff0c;一般会抽象一个摄像机组件。摄像机类似于人眼&#xff0c;可以建立一个本地坐标系。相机的位置是坐标原点&#xff0c;摄像机的朝…

2020年下半年~2022下半年下午题易错总结

2020年下半年 试题一&#xff1a; 1.组播报文对无线网络空口的影响主要有(14) &#xff0c;随着业务数据转发的方式不同, 组播报文的抑制分别在 (15)、(16) 配置。 答案&#xff1a; &#xff08;14&#xff09;无线空口拥塞 &#xff08;15&#xff09;直连AP的交换…

瑞芯微RK3568核心板在边缘服务器产品中的应用-迅为电子

迅为RK3568核心板在边缘服务器产品中可以发挥关键作用&#xff0c;为边缘计算应用提供高性能的计算和多媒体处理能力。边缘服务器通常用于处理和存储数据&#xff0c;执行本地计算任务&#xff0c;并支持与远程云服务的通信。以下是RK3568核心板在边缘服务器产品中的应用方案&a…

项目中 .env.development 与 .env.production 的区别

文章目录 一、项目中使用此两个文件的意义二、使用方式 一、项目中使用此两个文件的意义 我们在开发项目时&#xff0c;经常会有开发环境与生产环境&#xff0c;分别会对应不同的请求地址与各种不同的变量&#xff0c;这个时候我们就可以使用 process.env 去抓取这两个文件写的…

VS使用Visual Assist添加代码说明信息

写代码时&#xff0c;我们一般需要在代码的最前面添加一些说明信息&#xff0c;作者的联系方式等等。一些高级的 IDE 工具提供修改代码模板的功能&#xff0c;这样就能够在创建新代码时自动加上版权信息。Visual Studio 虽然没有提供这样的操作界面&#xff0c;但是我们可以通过…

Linux上如何部署SpringBoot项目——手把手教会你

目录 前言 1、准备操作 1.1、Linux上安装jdk 1.2、准备MySQL数据库 1.3、打开云服务器的防火墙 1.4、准备jar包 2、部署 前言 下面是教你部署SpringBoot项目&#xff0c;jar包形式的&#xff0c;不是war包&#xff01;&#xff01;&#xff01; 1、准备操作 1.1、Linux…

echarts的markline警标线(一条/多条)的使用

echarts之markLine(可以设置特定阈值线(警戒线)) 一条线写法 series: [{name: Fake Data,type: line,showSymbol: false,data: data,markLine: {symbol: [none, none], // 去掉箭头label: {show: false,position: start,formatter: {b}},data: [{name: 阈值,yAxis: 200}],line…

ruoyi识别访问设备是pc端还是移动端跳转到对应的登录页面

背景需求 ruoyi框架&#xff0c;前后端分离。现在要在用户访问的时候根据不同的设备跳转到不同的登录页面。 教程 router/index.js 修改src/router/index.js&#xff0c;在这里增加自己的要跳转的页面 permission.js 在白名单中添加自己的登录页面 增加以下识别的代码 le…

一氧化碳单位换算 以及环保最低排放

换算单位&#xff1a; 1.0 % 10000 mg/m3 1.0 mg/m3 0.870 ppm 举例&#xff1a;CO表测数据 1.0 %&#xff0c;则10000 mg/m3&#xff0c;则10000*22.4/28 8700 ppm 参考&#xff1a;钢铁工业大气污染物超低排放标准 DB13

半导体测试方法主要有哪几种?

外观检测&#xff1a;对半导体外观质量的评估&#xff0c;包括检查芯片的平整度、颜色、镜面度等。 电性能测试&#xff1a;测量半导体的电导率、电阻率、电流和电压特性等&#xff0c;以评估其电性能。 温度测试&#xff1a;用于测量半导体在不同温度下的电性能表现&#xf…

Nginx基础学习

1. 引言 项目刚上线时&#xff0c;用户使用少&#xff0c;并发量小&#xff0c;在这种情况下&#xff0c;在这种情况下&#xff0c;一个jar包部署到一台服务器上启动就满足需求了。 随着&#xff0c;平台使用的用户量增多&#xff0c;并发量也慢慢增大&#xff0c;这种情况下一…