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核心技术与实战
登录|注册

11 | 提到生命周期,我们是在说什么?

陈航 2019-07-23
你好,我是陈航。今天,我要和你分享的主题是 Flutter 中的生命周期是什么。
在上一篇文章中,我们从常见的 StatefulWidget 的“万金油”误区出发,一起回顾了 Widget 的 UI 更新机制。
通过父 Widget 初始化时传入的静态配置,StatelessWidget 就能完全控制其静态展示。而 StatefulWidget,还需要借助于 State 对象,在特定的阶段来处理用户的交互或其内部数据的变化,并体现在 UI 上。这些特定的阶段,就涵盖了一个组件从加载到卸载的全过程,即生命周期。与 iOS 的 ViewController、Android 的 Activity 一样,Flutter 中的 Widget 也存在生命周期,并且通过 State 来体现。
而 App 则是一个特殊的 Widget。除了需要处理视图显示的各个阶段(即视图的生命周期)之外,还需要应对应用从启动到退出所经历的各个状态(App 的生命周期)。
对于开发者来说,无论是普通 Widget(的 State)还是 App,框架都给我们提供了生命周期的回调,可以让我们选择恰当的时机,做正确的事儿。所以,在对生命周期有了深入理解之后,我们可以写出更加连贯流畅、体验优良的程序。
取消
完成
0/1000字
划线
笔记
复制
© 版权归极客邦科技所有,未经许可不得传播售卖。 页面已增加防盗追踪,如有侵权极客邦将依法追究其法律责任。
该试读文章来自付费专栏《Flutter核心技术与实战》,如需阅读全部文章,
请订阅文章所属专栏。
立即订阅
登录 后留言

精选留言(21)

  • 张简
    42节和43节其实可以提前讲讲,大多数开发者都是这种混合接入方式,和具体开发无关。首先遇到的就是混合接入问题。
    2019-07-23
    1
    18
  • 这得从我捡到一个鼠标垫开始说起
    实际上打印监听的时候发现并不是文中所描述的那样。
    从前台退居后台的时候执行inactive->paused
    从后台进入前台的时候执行inactive->resumed
    paused和resumed不会同时执行,是不是文中有错?
    AppLifecycleState

    作者回复: 你理解错了,我来帮你梳理下:
    1.从前台退居后台,打印的是inactive->paused,但你忘了它之前的状态是resumed;
    2.从后台进入前台,打印的是inactive->resumed,但你忘了它之前的状态是paused

    2019-08-26
    1
    7
  • 许童童
    在构造函数中Widget还未生成,所以只能做一些参数传入的处理,initState中可以做初始化State的变量的操作。

    作者回复: 赞

    2019-07-23
    6
  • jia58960
    为啥navigator.push()之后当前的widget deactivate了还要build一次?对老师给的工程代码验证了确实是这样,还请老师解释下

    作者回复: 因为State在视图树的相对位置变了

    2019-07-24
    1
    4
  • 离尘不离人คิดถึง
    `width WidgetsBindingObserver` 这里没看懂, 明明用的是 with `WidgetsBindingObserver`,但是代码却使用的是 `WidgetsBinding`,查看源码,发现 `WidgetsBindingObserver` 只是 `binding.dart` 里面的一个抽象类;老师这里能解答下吗

    作者回复: WidgetsBinding是一个连接上层Widget回调与底层Flutter引擎实现的一个抽象胶水类,在不同的平台有不同的实现(比如在单元测试中是TestWidgetsFlutterBinding,在UI开发中是WidgetsFlutterBinding),所以我们需要在代码中用WidgetsBinding.instance获取特定的实例,而WidgetsBindingObserver只是一个接口而已

    2019-10-15
    1
  • 咖啡凉了
    在iOS中,我们会用到viewWillAppear中实现方法刷新上一个页面的数据。Flutter中有类似的生命周期吗,怎么解决子页面数据提交后,返回到上一个页面刷新视图

    作者回复: 参考21节“路由与导航”里面提到的页面关闭参数

    2019-08-26
    1
  • Geek_b09541
    大牛,你好,我想买一本关于flutter的工具书,麻烦推荐一本

    作者回复: 不推荐买书,如果想要快速了解一些核心Feature可以看看
    官方的cookbook: https://flutter.dev/docs/cookbook和wendux写的Flutter实战:https://book.flutterchina.club/

    2019-07-24
    1
    1
  • 承香墨影
    您好,有问题请教。
    AppLifecycleState 中还有一个 suspending 的状态,这个状态表示什么意义?会在什么场景下触发?

    作者回复: 表示程序被暂时挂起,这是操作系统底层暴露的状态,不是所有的平台都有(比如iOS就没有),所以这个状态可以理解成基本没用

    2019-11-15
  • 赤茗
    而且那四个(PostFrameCallback)对应的状态 顺序为 inactive->paused->inactive->resume(只是唤起的过程)完整的日志如下:
    I/flutter (27127): AppLifecycleState.inactive
    I/flutter (27127): AppLifecycleState.resumed
    I/flutter (27127): PersistentFrameCallback
    I/flutter (27127): PersistentFrameCallback
    I/flutter (27127): PersistentFrameCallback
    I/flutter (27127): PersistentFrameCallback
    I/flutter (27127): PersistentFrameCallback
    I/flutter (27127): PersistentFrameCallback
    I/flutter (27127): PersistentFrameCallback
    I/flutter (27127): PersistentFrameCallback
    I/flutter (27127): PostFrameCallback AppLifecycleState.inactive
    I/flutter (27127): PostFrameCallback AppLifecycleState.paused
    I/flutter (27127): PostFrameCallback AppLifecycleState.inactive
    I/flutter (27127): PostFrameCallback AppLifecycleState.resumed

    作者回复: 导航站切换,前后台切换会涉及到多个页面的视图树调整和重新渲染,所以会刷新多次。但每次渲染完成都会调postframecallback是确定的

    2019-10-24
  • 赤茗
    老师,我在didChangeAppLifecycleState 里加了Frame的两个回调,发现唤起的时候PostFrameCallBack调了四次,而我在setStatus里加这两个回调时只调用了一次,为什么会出现这种情况?

    作者回复: 前后台切换,导航站切换会涉及到多个页面的Widget树的调整和重新渲染

    2019-10-24
  • Carlo
    除了需要监听 App 的生命周期回调做相应的处理之外,有时候我们还需要在组件渲染之后做一些与显示安全相关的操作。

    能具体解释一下这个是什么意思么?比如说什么是显示安全相关的操作?

    作者回复: 比如你要等界面上的某个元素出现之后,才认为视图渲染完成,就可以用这个机制。具体可以参考40节分享

    2019-10-09
  • 微笑美男😄
    课件下载后,怎么用visual studio code 打开。我用Mac 发现无法打开

    作者回复: 报什么错?

    2019-10-08
  • Geek_0793f1
    statelessWidget 没有 类似 deactivate 之类的生命周期钩子吗

    作者回复: Widget就是一个配置,所以不涉及到生命周期。Element有

    2019-08-12
  • YangHong
    inactive处于不活动状态是指线程都挂起了吗,为什么前台切后台要经历这个处理?

    作者回复: 是个中间过渡状态,一般没什么用

    2019-07-30
  • Mr.J
    老师,Flutter的源码是怎么分类的,感觉分包好乱,经常找不到源码,不知道该去哪儿找

    作者回复: 试试在IDE上 Command+鼠标点击 类名?

    2019-07-27
  • Bula
    可能是我前面的知识没理解透彻 切换一个新的视图,当前的widget就会回调deactivate ,移除了。那返回回来 这个视图是需要再重建一次吗 ,返回操作很常见,为什么要移除前一个视图的widget啊

    作者回复: 因为State的相对位置变了呀。不过放心UI是不会刷新的

    2019-07-26
    1
  • Geek_60d7a7
    关于dart的mixin,老师能讲讲么,尤其是mixin on,看了好多资料都还不是很清晰…

    作者回复: Mixin就是以非继承的方式实现代码复用的一种机制而已呀

    2019-07-24
    1
  • YJ
    ios 中的viewWillAppear 在这里有对应的回调吗? 比如当前页面显示的时候此时想做点事情

    作者回复: 没有。不过你可以用帧回调做类似的事情

    2019-07-24
  • 吴小安
    deactivate 函数会被调用,这时 State 会被暂时从视图树中移除。值得注意的是,页面切换时,由于 State 对象在视图树中的位置发生了变化,需要先暂时移除后再重新添加,重新触发组件构建,因此这个函数也会被调用。
    为什么push的时候当前的widget还需要buildbu?pop的时候不是执行一次build了么,push的时候执行的build有什么意义

    作者回复: 因为State在根视图的位置变了

    2019-07-23
    1
  • 许童童
    老师你好,为什么项目启动时Resolving dependencies和Running Gradle task 'assembleDebug'阶段要很长的时间,大概2分钟。有什么办法可以加快速度吗?

    作者回复: Gradle默认每次编译都会resolve dependencies,每次都会去进行网络请求。如果你那边访问jCenter很慢,这个步骤就卡住了。

    你可以临时在Project Preferences的Gradle那里启用Offline work,不过新增依赖之后你需要在把这个设置改回来

    2019-07-23
收起评论
21
返回
顶部