Flutter state生命周期

最新推荐文章于 2025-05-30 13:22:13 发布

原创最新推荐文章于 2025-05-30 13:22:13 发布 · 4.3k 阅读

1 ·

本内容遵循CC 4.0 BY-SA版权协议

标签

#flutter #flutter生命周期

android 同时被 2 个专栏收录

168 篇文章

订阅专栏

flutter

3 篇文章

订阅专栏

这篇博客探讨了Flutter应用中widget的生命周期，特别是在不同状态变化时的行为。作者通过日志记录展示了从打开app到页面跳转再到返回的过程，指出`didUpdateWidget`在父widget重建时被调用，而`deactivate`可能在渲染树调整时触发。文章引用了大牛卓原和jzoom的观点作为参考。

最近研究flutter的生命周期，当然已经有大牛早已深入探究填坑了！

但是还是有些疑问！例如 didUpdateWidget为什么没有调用？

其实api早已经说明白了：父widget 重新build时调用！！

/// Called whenever the widget configuration changes.
  ///
  /// If the parent widget rebuilds and request that this location in the tree
  /// update to display a new widget

具体的生命周期图解，大牛早已总结到位！

下面以日志的显示展示生命周期的变化，

测试代码：Page1中嵌套一个Page1Inner的widget;

打开app进入主页面Page1(初始化阶段）

I/flutter (16721): --page1:initState
I/flutter (16721): --page1:didChangeDependencies
I/flutter (16721): --page1:build
I/flutter (16721): --Page1Inner:initState
I/flutter (16721): --Page1Inner:didChangeDependencies
I/flutter (16721): --Page1Inner:build

当page1状态发生改变时

I/flutter (16721): --page1:build
I/flutter (16721): --Page1Inner:didUpdateWidget
I/flutter (16721): --Page1Inner:build

发现调用了page1inner的didUpdateWidget方法，page1自己didUpdateWidget方法的并没有调用

跳转到第二个页面时

I/flutter (16721): ++page2:initState
I/flutter (16721): ++page2:didChangeDependencies
I/flutter (16721): ++page2:build
I/flutter (16721): --page1:deactivate
I/flutter (16721): --Page1Inner:deactivate
I/flutter (16721): --page1:build
I/flutter (16721): --Page1Inner:didUpdateWidget
I/flutter (16721): --Page1Inner:build

page2页面初始化不必说了，关键看 page1build方法调用后，page1Inner调用didUpdateWidget方法，之后才是自身build;

这说明page1Inner的父widget发生变化了才调用了，page1Inner的didUpdateWidget方法！

从第二个页面返回时

I/flutter (16721): --page1:deactivate
I/flutter (16721): --Page1Inner:deactivate
I/flutter (16721): --page1:build
I/flutter (16721): --Page1Inner:didUpdateWidget
I/flutter (16721): --Page1Inner:build
I/flutter (16721): ++page2:deactivate
I/flutter (16721): ++page2:dispose

deactive 本意是不再活动，为毛 page1调用后build? 来个大胆的猜测：deactive 在在渲染树移除或是可添加到渲染树时调用!!??

参考：大牛卓原

参考：大牛jzoom