老孟导读:此篇文章是生命周期相关文章的番外篇,在查看源码的过程中发现了这一有趣的问题,欢迎大家一起探讨。

Flutter 中Stateful 组件的生命周期:http://laomengit.com/blog/20201227/Stateful%E7%BB%84%E4%BB%B6%E7%94%9F%E5%91%BD%E5%91%A8%E6%9C%9F.html

Flutter 中与平台相关的生命周期:http://laomengit.com/blog/20201227/%E7%9B%B8%E5%85%B3%E5%B9%B3%E5%8F%B0%E7%9A%84%E7%94%9F%E5%91%BD%E5%91%A8%E6%9C%9F.html

博客中还有更多精彩文章,也欢迎加入 Flutter 交流群。

灵活性

build 方法放在 State 中比放在 StatefulWidget 中更具灵活性,比如说,AnimatedWidgetStatefulWidget 的子类,AnimatedWidget 是一个抽象类,其中有一个 Widget build(BuildContext context) 的抽象方法,此方法需要子类重写,AnimatedWidget 源代码如下:

abstract class AnimatedWidget extends StatefulWidget {
...
/// Override this method to build widgets that depend on the state of the
/// listenable (e.g., the current value of the animation).
@protected
Widget build(BuildContext context); /// Subclasses typically do not override this method.
@override
_AnimatedState createState() => _AnimatedState(); ...
}

删除了一些代码,保留了重点代码。

试想一下,如果 build 方法放在 StatefulWidget 中,则 AnimatedWidget 中的 build 方法需要带一个 State 参数,如下:

abstract class AnimatedWidget extends StatefulWidget {
...
/// Override this method to build widgets that depend on the state of the
/// listenable (e.g., the current value of the animation).
@protected
Widget build(BuildContext context, AnimatedState state); /// Subclasses typically do not override this method.
@override
_AnimatedState createState() => _AnimatedState(); ...
}

但 AnimatedState 是内部实现,并不需要开放给外部(开发者),外部也不需要知道 AnimatedState 的内部实现。

闭包 this 指向异常

假设 build 方法在 StatefulWidget 中,StatefulWidget 的子类写法如下:

class MyWidget extends StatefulWidget {

  final Color color;

  @override
Widget build(BuildContext context, MyWidgetState state) {
print('${this.color}');
return Container();
}
}

此时的 this 指向的是 MyWidget 的实例,然后父组件改变颜色,重新构建 MyWidget 组件,前一个 MyWidget 的实例中的 this 依然指向前一个 MyWidget 的实例,颜色并未发生变化。

如果 build 方法在 State 中,代码如下:

class MyWidget extends StatefulWidget {
final Color color; const MyWidget({Key key, this.color}) : super(key: key); @override
_MyWidgetState createState() => _MyWidgetState();
} class _MyWidgetState extends State<MyWidget> {
@override
Widget build(BuildContext context) {
print('${widget.color}');
return Container();
}
}

同样,父组件改变颜色,重新构建 MyWidget 组件,此时框架更新了 State 对象的 widget 属性的引用,新的 MyWidget 实例和 $ {widget.color} 将显示绿色。

性能

有状态的组件包含StatefulWidget 和 State,当有状态组件的配置发生更改时,StatefulWidget 将会被丢弃并重建,而 State 不会重建,框架会更新 State 对象中 widget 的引用,这极大的减轻了系统重建有状态组件的工作。

此方式对动画来说极为重要,由于 State 不会被重建,保留了前面的状态,不断的根据前一个状态计算下一个状态并重建其widget,达到动画的效果。

交流

老孟Flutter博客(330个控件用法+实战入门系列文章):http://laomengit.com

欢迎加入Flutter交流群(微信:laomengit)、关注公众号【老孟Flutter】:

【老孟Flutter】为什么 build 方法放在 State 中而不是在 StatefulWidget 中的更多相关文章

  1. Flutter的布局方法

    重点是什么? Widgets 是用于构建UI的类. Widgets 用于布局和UI元素. 通过简单的widget来构建复杂的widget Flutter布局机制的核心就是widget.在Flutter ...

  2. RPC 编程 使用 RPC 编程是在客户机和服务器实体之间进行可靠通信的最强大、最高效的方法之一。它为在分布式计算环境中运行的几乎所有应用程序提供基础。

    RPC 编程 使用 RPC 编程是在客户机和服务器实体之间进行可靠通信的最强大.最高效的方法之一.它为在分布式计算环境中运行的几乎所有应用程序提供基础.本文介绍 RPC 客户机和服务器之间基本的事件流 ...

  3. vuex this.$store.state.属性和mapState的属性中的一点点区别

    做泰康公众号的项目时候有一个需求创建公众号的时候后台有一个社区id提供给后台展现人员和部门,在群发消息时候也要给后台一个社区id只不过获取社区的id接口和上一个不是一样的,本来在页面中写了两个sele ...

  4. Nodejs:npm run build之后,dist\index.html页面在火狐中可以正常显示登录页面并登录成功,在Chrome中可以正常显示登录页面,登录失败

    问题描述:Nodejs:npm run build之后,dist\index.html页面在火狐中可以正常显示登录页面并登录成功,在Chrome中可以正常显示登录页面,登录失败 解决方法:将打包后的d ...

  5. 两种方法实现用CSS切割图片只取图片中一部分

    切割图片这里不是真正的切割,只是用CSS取图片中的一部分而已,主要有两种方式,一是做为某一元素的背景图片,二是用img元素的属性.下面有个不错的示例,大家可以参考下 切割图片这里不是真正的切割,只是用 ...

  6. 关于phpcms中模块_tag.class.php中的pc_tag()方法的含义

    关于phpcms中模块_tag.class.php中的pc_tag()方法的含义:        在phpcms系统中自己写后台模块,要在前台模板中显示出来须要在\phpcms\modules\自定义 ...

  7. iphone下元素放在了一个position: fixed的div中无法点击

    网上的说法是这样的: iphone的浏览器有这么一个bug, 当你使用锚定或滚动页面后, 你会发现某些东西不能点击了! 如果你的这个“东西”放在了一个position: fixed的div中, 那么你 ...

  8. android开发中关于继承activity类中方法的调用

    android开发中关于继承activity类中的函数,不能在其他类中调用其方法. MainActivity.java package com.example.testmain; import and ...

  9. Java 访问限制符 在同一包中或在不同包中:使用类创建对象的权限 &amp; 对象访问成员变量与方法的权限 &amp; 继承的权限 &amp; 深入理解protected权限

    一.实例成员与类成员 1. 当类的字节码被加载到内存, 类中类变量.类方法即被分配了相应内存空间.入口地址(所有对象共享). 2. 当该类创建对象后,类中实例变量被分配内存(不同对象的实例变量互不相同 ...

  10. HTML5中的data-*属性和jQuery中的.data()方法使用

    原文地址链接:http://blog.csdn.net/fly_zxy/article/details/50687691: HTML5中的data-*属性 我们往往会根据需要在HTML标记上添加自定义 ...

随机推荐

  1. iOS:小技巧(不断更新)

    记录下一些不常用技巧,以防忘记,复制用. 1.获取当前的View在Window的frame: UIWindow * window=[[[UIApplication sharedApplication] ...

  2. CentOS7_RAID5_LVM_SAMBA

    1.在CentOS 7上构建RAID5.LVM和SAMBA服务器(1)——预备http://blog.csdn.net/kingfox/article/details/51099617 2.在Cent ...

  3. 软件工程 speedsnail 冲刺9

    20150313 完成任务:为周五检查做了相关准备,包括稳定性测试,分辨率测试: 遇到问题: 问题1 进入关卡的开始蜗牛会跳一段距离 解决1 没有解决 明日任务: 冲刺结束

  4. html5 canvas防微博旋转

    <!doctype html> <html> <head> <meta charset="utf-8"> <title> ...

  5. eclipse中(装了插件m2eclipse后的)导入maven工程显示&quot;感叹号&quot;

      有时候导入一些开源工程(maven结构的),在eclipse中(装了插件m2eclipse后的)该工程前面会有一个小的红色感叹号,但点开工程后没有发现有打小红叉的内容,这种情况其实大部分是jar包 ...

  6. Redis未授权访问缺陷让服务器沦为肉鸡

    朋友的一个项目说接到阿里云的告警,提示服务器已沦为肉鸡,网络带宽被大量占用,网站访问很慢,通过SSH远程管理服务器还频繁断开链接.朋友不知如何下手,便邀请我帮忙处理. 阿里云的安全告警邮件内容: 在没 ...

  7. perl正则表达式第二周笔记

    1.使用正则表达式修改文本 1.使用正则表达式修改文本 正则表达式的功能不只有查询,还可以对文本进行修改,例如替换 $var=~m/regex/i $var=~s/regex/replacement/ ...

  8. Java对多线程~~~Fork/Join同步和异步帧

    于Fork/Join骨架,当提交的任务,有两个同步和异步模式.它已被用于invokeAll()该方法是同步的.是任何 务提交后,这种方法不会返回直到全部的任务都处理完了.而还有还有一种方式,就是使用f ...

  9. 1.在虚拟机中安装Linux中的CentOS7系统

    1. 虚拟机的创建:如下图,可在右侧窗口中创建新的虚拟机,也可以在文件菜单中新建虚拟机,或者使用快捷键新建 这里选择“自定义(高级) ”,然后进入“下一步”设置 这里是选择虚拟机硬件的美容性的,默认就 ...

  10. C# 使用NPOI 操作Excel

    首先 Nuget 引入NPOI 1.读取Excel /// <summary> /// 读取Excel数据 /// </summary> public static void ...