Flutter核心技术与实战
陈航
美团点评高级技术专家
立即订阅
6150 人已学习
课程目录
已完结 47 讲
0/4登录后,你可以任选4讲全文学习。
课前必读 (3讲)
开篇词 | 为什么每一位大前端从业者都应该学习Flutter?
免费
01 | 预习篇 · 从0开始搭建Flutter工程环境
02 | 预习篇 · Dart语言概览
Flutter开发起步 (3讲)
03 | 深入理解跨平台方案的历史发展逻辑
04 | Flutter区别于其他方案的关键技术是什么?
05 | 从标准模板入手,体会Flutter代码是如何运行在原生系统上的
Dart语言基础 (3讲)
06 | 基础语法与类型变量:Dart是如何表示信息的?
07 | 函数、类与运算符:Dart是如何处理信息的?
08 | 综合案例:掌握Dart核心特性
Flutter基础 (13讲)
09 | Widget,构建Flutter界面的基石
10 | Widget中的State到底是什么?
11 | 提到生命周期,我们是在说什么?
12 | 经典控件(一):文本、图片和按钮在Flutter中怎么用?
13 | 经典控件(二):UITableView/ListView在Flutter中是什么?
14 | 经典布局:如何定义子控件在父容器中排版的位置?
15 | 组合与自绘,我该选用何种方式自定义Widget?
16 | 从夜间模式说起,如何定制不同风格的App主题?
17 | 依赖管理(一):图片、配置和字体在Flutter中怎么用?
18 | 依赖管理(二):第三方组件库在Flutter中要如何管理?
19 | 用户交互事件该如何响应?
20 | 关于跨组件传递数据,你只需要记住这三招
21 | 路由与导航,Flutter是这样实现页面切换的
Flutter进阶 (17讲)
22 | 如何构造炫酷的动画效果?
23 | 单线程模型怎么保证UI运行流畅?
24 | HTTP网络编程与JSON解析
25 | 本地存储与数据库的使用和优化
26 | 如何在Dart层兼容Android/iOS平台特定实现?(一)
27 | 如何在Dart层兼容Android/iOS平台特定实现?(二)
28 | 如何在原生应用中混编Flutter工程?
29 | 混合开发,该用何种方案管理导航栈?
30 | 为什么需要做状态管理,怎么做?
31 | 如何实现原生推送能力?
32 | 适配国际化,除了多语言我们还需要注意什么?
33 | 如何适配不同分辨率的手机屏幕?
34 | 如何理解Flutter的编译模式?
35 | Hot Reload是怎么做到的?
36 | 如何通过工具链优化开发调试效率?
37 | 如何检测并优化Flutter App的整体性能表现?
38 | 如何通过自动化测试提高交付质量?
Flutter综合应用 (6讲)
39 | 线上出现问题,该如何做好异常捕获与信息采集?
40 | 衡量Flutter App线上质量,我们需要关注这三个指标
41 | 组件化和平台化,该如何组织合理稳定的Flutter工程结构?
42 | 如何构建高效的Flutter App打包发布环境?
43 | 如何构建自己的Flutter混合开发框架(一)?
44 | 如何构建自己的Flutter混合开发框架(二)?
结束语 (1讲)
结束语 | 勿畏难,勿轻略
特别放送 (1讲)
特别放送 | 温故而知新,与你说说专栏的那些思考题
Flutter核心技术与实战
登录|注册

10 | Widget中的State到底是什么?

陈航 2019-07-20
你好,我是陈航。
通过上一篇文章,我们已经深入理解了 Widget 是 Flutter 构建界面的基石,也认识了 Widget、Element、RenderObject 是如何互相配合,实现图形渲染工作的。Flutter 在底层做了大量的渲染优化工作,使得我们只需要通过组合、嵌套不同类型的 Widget,就可以构建出任意功能、任意复杂度的界面。
同时,我们通过前面的学习,也已经了解到 Widget 有 StatelessWidget 和 StatefulWidget 两种类型。StatefulWidget 应对有交互、需要动态变化视觉效果的场景,而 StatelessWidget 则用于处理静态的、无状态的视图展示。StatefulWidget 的场景已经完全覆盖了 StatelessWidget,因此我们在构建界面时,往往会大量使用 StatefulWidget 来处理静态的视图展示需求,看起来似乎也没什么问题。
那么,StatelessWidget 存在的必要性在哪里?StatefulWidget 是否是 Flutter 中的万金油?在今天这篇文章中,我将着重和你介绍这两种类型的区别,从而帮你更好地理解 Widget,掌握不同类型 Widget 的正确使用时机。
取消
完成
0/1000字
划线
笔记
复制
© 版权归极客邦科技所有,未经许可不得传播售卖。 页面已增加防盗追踪,如有侵权极客邦将依法追究其法律责任。
该试读文章来自付费专栏《Flutter核心技术与实战》,如需阅读全部文章,
请订阅文章所属专栏。
立即订阅
登录 后留言

精选留言(29)

  • JakePrim
    就喜欢这种讲解加举例的方式,非常清晰
    2019-07-20
    12
  • 加温后的啤酒
    老师,有一个疑问没有理解。你文中提到如果根布局是StatefulWidget,如果调用setState,就会触发子widet的销毁和重建,影响性能。但是在真实业务场景中,我把跟控制器写成StatefulWidget,但我默认他是不可变的,所以我肯定不会主动去调用setState方法啊,那如果我不主动调用setState的话,那不就不会有应能影响了吗。这没法说明StatelessWidget的存在是必要的的??老师能解释一下吗?

    作者回复: 实际上你即使不去主动setState,对于Stateful在特定的时机也会rebuild的。具体可以参看下一篇文章

    2019-07-22
    1
    9
  • (☆_☆)
    简单来说StatelessWidget就是为了提升性能而被设计出来,而完全使用StatefulWidget可能对性能有影响,所以在使用前一定要评估一下用哪个比较合适,这样理解对吗?

    作者回复: 是的

    2019-07-20
    5
  • JW
    Element是Widget层的一个抽象用来处理真正需要重建的的Widget,它是如何来决定谁要重建谁不要重建的逻辑的?

    作者回复: 1.Widget通知Element重建的触发时机,可以参考第11篇生命周期的分享。
    2.一旦Widget触发重建,Element会根据重建前后Widget树的渲染类型及属性变化情况,决定后续的复用、新建过程:比如Widget树中仅仅是调整了一个渲染样式,Flutter会通知Element直接复用现有节点,同步属性至RenderObject,触发绘制即可;如果Widget树中涉及到Widget类型的替换或变更,Flutter则会将老的Element及RenderObject摘除,让新的Widget重新走一遍创建Element和RenderObject的流程,挂载到Element树和RenderObject树上。

    2019-09-27
    1
  • 、轻
    这两个widget与react中的容器和组件很类似

    作者回复: 是类似的概念

    2019-08-14
    1
  • Bula
    StatefulWidget感觉很难减少使用频率啊 现在的设计标题栏的标题都是要跟着状态改变动态更改 😓

    作者回复: 拆小就行了

    2019-07-22
    1
  • G
    我查了下资料,好像是说虽然widget是不可变的,但是state是可变的,也就是说state实例会被复用,并且在setstate重新生成widget树时会检查节点是否有变化,没有变化就停止遍历。另外我认为stateful的实例相比stateless更轻,毕竟没有build方法。
    Ps: 在递归下降生成子树的时候,我有个疑问,flutter如何判断子树一样呢?算法是如何的?

    作者回复: 靠类型和key

    2019-07-22
    1
    1
  • Eren
    学到现在,真的是受益匪浅,之前的一些疑惑都从中得到了答案,有种恍然大悟的感觉,希望老师能在未来的学习中,分享一下 Flutter 的从业情况和面试题,感谢之至。

    作者回复: 会讲一部分

    2019-07-20
    1
  • Captain
    有个问题请教“虽然 Flutter 内部通过 Element 层可以最大程度地降低对真实渲染视图的修改,提高渲染效率,而不是销毁整个 RenderObject 树重建。但,大量 Widget 对象的销毁重建是无法避免的”这里 如果根节点用了Stateful,根节点setState,来改变其中变化的子节点状态(子节点状态中没有耗时操作),那Element会帮助diff出变化的子节点,避免重新构建,这样也不影响性能呀?

    作者回复: “但,大量的Widget对象的销毁重建是无法避免的”

    2019-11-14
  • 干就完事
    老师,就是StatefulWidget拆小……不是造成整个树的子节点深度变多了嘛。

    作者回复: 这些都是不参与绘制/布局的widget

    2019-11-01
  • 菜头
    State<Image> 这种声明是什么意思?

    作者回复: 泛型

    2019-10-21
  • 欢喜哥
    _handleImageChanged 这个方法是谁来调用,什么时候调用?

    作者回复: ImageStream,图片加载完成。

    2019-09-16
  • davidzhou
    老师,现在我创建了两个widget,widget a里面有个方法func(),我希望在widget b里面的button事件能够触发func(),怎么一个实现方案

    作者回复: 你可以在他们的父Widget之上定义一个controller去中转;也可以通过event bus搞定。

    2019-08-22
  • 张简
    您说的文案数据集就是state吧?

    作者回复: State中持有的,用于界面渲染的数据

    2019-08-21
  • 矮个子先生😝
    ```
      const Image({
        Key key,
        @required this.image,
        // 其他参数
      }) : assert(image != null),
           super(key: key);
    ```
    老师可以介绍下这个构造方法吗, 第一个Key key, : assert(image != null),super(key: key); 这三部分

    作者回复: 1.key用在Element复用过程中,控制控件如何取代树中的另一个控件。比如你在父Widget用新的image重建了Image,底层Element还是能复用的。
    2.assert是断言,只在debug中生效。
    3.super我们在Dart里面讲过,是调用父类的构造方法

    2019-08-13
  • 严旭珺
    感觉项目的一个优化方向就是尽量用statelesswidget

    作者回复: 是的

    2019-08-08
  • 吴小安
    请问这种声明式编程在ios和安卓业界有没有简单的框架能用的?
    感觉现在ios使用的面向数据开发也都是命令式编程,界面绑定某个值,kvo变化了在回调里做刷新ui的操作,怎样能向这种声明式转移

    作者回复: Litho和Texture(AsyncDisplayKit)算一个,不过框架整体比较重,有一定学习成本

    2019-08-07
    1
  • 格格
    现在Image里已经找不到_handleImageChanged方法了,好像被_handleImageFrame取代了

    作者回复: 确实,1.5还有,1.7已经把这个方法替换掉了。

    2019-08-05
  • Carlo
    那所有的button都是stateful widget对么? 那一个提示错误的弹出框中包含一个OK button。那这个弹出框可以是stateless吗?

    作者回复: 看情况,如果不需要变化,通常都是Stateless

    2019-08-02
  • 承香墨影
    老师,你好,有个疑问希望解答。
    既然 StatefulWidget 需要区分场景来使用,并且 Widget 的销毁和重建应该是 Flutter 的常态。那么在使用中,应该将 StatefulWidget 尽量的拆小,让其影响范围,尽可能的小。
    这是不是就对应到 “04 | Flutter 区别于其他方案的关键技术是什么” 中讲到的 布局边界 和 重绘边界 概念。其实在实际代码中,是依赖 StatelessWidget 进行设定边界,从而隔离布局和重绘的?

    作者回复: 不是的哈。

    1.重绘边界是解决同层Widget(有兄弟、有父子)之间渲染依赖出现的概念:即只要他们享用了同一个layer,则无论哪一个需要重绘,整个layer都会受到影响。
    2.StatefulWidget则影响的是其子节点,一般情况下只影响重建,Element会在底层做diff,确保没有修改的不会重绘

    2019-07-30
收起评论
29
返回
顶部