flutter中的生命周期

前言

和其他的视图框架比如android的Activity一样,flutter中的视图Widget也存在生命周期,生命周期的回调函数提现在了State上面。理解flutter的生命周期,对我们写出一个合理的控件至关重要。组件State的生命周期整理如下图所示:

大致可以看成三个阶段

  • 初始化(插入渲染树)
  • 状态改变(在渲染树中存在)
  • 销毁(从渲染树种移除)

各个函数

构造函数

这个函数不属于生命周期,因为这个时候State的widget属性为空,如果要在构造函数中访问widget的属性是行不通的。但是构造函数必然是要第一个调用的。

initState

/// Called when this object is inserted into the tree.

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

didChangeDependencies

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

这个函数会紧跟在initState之后调用,并且可以调用BuildContext.inheritFromWidgetOfExactType,那么BuildContext.inheritFromWidgetOfExactType的使用场景是什么呢?最经典的应用场景是

new DefaultTabController(length: 3, child: new TabBar(
      tabs: [ "主页","订单","我的" ]
      .map( (data)=>new Text(data) ).toList(),

TabBar本来需要定义一个TabController,但是在外面套一层DefaultTabController就不需要定义TabContrller了,看下源码:

@override
  void didChangeDependencies() {
    super.didChangeDependencies();
    _updateTabController();
    _initIndicatorPainter();
  }

void _updateTabController() {
    final TabController newController = widget.controller ?? DefaultTabController.of(context);
    ...

注意到这里DefaultTabController.of(context)

 static TabController of(BuildContext context) {
    final _TabControllerScope scope = context.inheritFromWidgetOfExactType(_TabControllerScope);
    return scope?.controller;
  }

实际上就是调用BuildContext.inheritFromWidgetOfExactType,也就说在didChangeDependencies中,可以跨组件拿到数据。

didUpdateWidget

/// Called whenever the widget configuration changes.

当组件的状态改变的时候就会调用didUpdateWidget,比如调用了setState.

实际上这里flutter框架会创建一个新的Widget,绑定本State,并在这个函数中传递老的Widget。

这个函数一般用于比较新、老Widget,看看哪些属性改变了,并对State做一些调整。

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

比如还是TabBar:

deactivate

/// Called when this object is removed from the tree.

在dispose之前,会调用这个函数。

dispose

/// Called when this object is removed from the tree permanently.

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

还是TabBar:

总结一下

阶段 调用次数 是否支持setState
构造函数 1
initState 1 无效(使用setState和不使用一样)
didChangeDependencies >=1 无效
didUpdateWidget >=1 无效
deactivate >=1
dispose 1

flutter探索之路
本专栏分享、收集flutter优秀中文资料,欢迎一起探索flutter。

A simple way to solving problems is using tools like docker/Spring boot/React Native/React/Vue… T...

1.2k 声望
335 粉丝
0 条评论
推荐阅读
CSplitterWnd动态分割
静态分割不提了,网上一大堆。关键是动态分割要怎么办?1、从未切分到切分2、从切分到未切分3、从切分状态m到切分状态n的转变比如这里要实现一个通达信的看盘窗口,分成主窗口和指标窗口。指标窗口可随时关闭,也...

jzoom阅读 1.1k

一个 JSer 的 Dart 学习日志(四):异步编程
本文是“一个 JSer 的 Dart 学习日志”系列的第四篇,本系列文章主要以挖掘 JS 与 Dart 异同点的方式,在复习和巩固 JS 的同时平稳地过渡到 Dart 语言。鉴于作者尚属 Dart 初学者,所以认识可能会比较肤浅和片面,...

知名喷子阅读 1.5k

封面图
Android 开发中的SSL pinning
在日常的安全渗透过程中,我们经常会遇到瓶颈无处下手,这时候如果攻击者从APP进行突破,往往会有很多惊喜。但是目前市场上的APP都会为防止别人恶意盗取和恶意篡改进行一些保护措施,比如模拟器检测、root检测、A...

xiangzhihong阅读 1k

Flutter 这一年:2022 亮点时刻
2022 年,我们非常兴奋的看到 Flutter 社区持续发展壮大,也因此让更多人体验到了令人难以置信的体验。每天有超过 1000 款使用 Flutter 的新移动应用发布到 App Store 和 Google Play,Web 平台和桌面应用程序数...

Flutter阅读 821

flutter系列之:在flutter中使用流式布局
我们在开发web应用的时候,有时候为了适应浏览器大小的调整,需要动态对页面的组件进行位置的调整。这时候就会用到flow layout,也就是流式布局。

flydean阅读 801

Flutter for Web 首次首屏优化——JS 分片优化
Flutter for Web(FFW)从 2021 年发布至今,在国内外互联网公司已经得到较多的应用。作为 Flutter 技术在 Web 领域的有力扩充,FFW 可以让熟悉 Flutter 的客户端同学直接上手写 H5,复用 App 端代码高效支撑业务...

阿里巴巴终端技术阅读 774

封面图
个推支持小程序消息推送,助力开发者实现用户高触达、高转化
随着小程序技术和应用场景的不断完善,越来越多的开发者搭建了小程序平台,为用户带来更“轻量”的服务。在小程序用户迅猛增长的同时,开发者对于小程序用户精细化触达的需求也愈加强烈。近日,个推消息推送上线了...

个推阅读 692

封面图

A simple way to solving problems is using tools like docker/Spring boot/React Native/React/Vue… T...

1.2k 声望
335 粉丝
宣传栏