Flutter | 一起玩转Widget(下)

简介: 你可以理解为在Flutter中一切都可以通过组合的方式实现,对于我们开发者,只需声明,或者说告诉框架这个组件是什么,它要怎么显示,携带了哪些参数,而Widget 就是用来帮你承载配置的东西。

State生命周期

initState()

当 Widget 第一次插入到 Widget树时被调用。对于每一个 State 对象,Flutter framework只会调用一次回调。适合做一些一次性的操作,比如状态初始化,订阅子树的事件通知等。

不能在 该回调 中调用BuildContext.dependOnInheritedWidgetOfExactType,原因是在初始化完成后, Widget 树中的 InheritFromWidget 也可能会发生变化,所以正确的做法应该在 build 方法或 didChangDependencied() 中调用它。

didChangeDependencies()

当State 对象的依赖发生变化时被调用。

build()

主要用于构建 Widget 子树时被调用,它会在如下场景被调用:

1.在调用 initState 之后

2.调用 didUpdateWidget 之后

3.调用 setState 之后

4.调用 didChangeDependencies 之后

5.在 State 对象从树中一个位置移除后,又重新插入到树的其它位置之后

reassemble()

此回调是专门为开发调试而提供,在热重载 (hot reload) 时被调用,此回调在 release 下永远不会被调用。

deactivate()

当State对象从树中被移除时,会调用此方法。在一些场景下,Flutter framework 会将State 对象重新插入到树中,如包含此 State 对象的子树在树的一个位置移动到了另一个位置时。如果移除后没有重新插入到树中则紧挨着会调用 disponse 方法。

dispose()

当State对象从树中被永久移除时调用,通常用于在此回调中释放资源。

生命周期图

具体动画示例

网络异常,图片无法展示
|


网络异常,图片无法展示
|

如何获取State对象

由于 StatefulWidget 的具体逻辑都在其对应的 State 中,所以很多时候,我们需要获取 StatefulWidget 对应的 State对象来调用一些方法,比如 Scaffold 组件对应的状态类 ScaffoldState 中就定义了打开 SncakBar(路由底部提示条)的方法,我们有两种方法在子 widget 树中获取 父级 StatefulWidget的 State 对象。

通过Context获取

context 对象有一个 findAncestorStateOfType() 方法,该方法可以从当前节点沿着 widget 树向上查找指定类型的 StatefulWidget 对应的 State 对象。


findAncestorStateOfType

 ScaffoldState _state = context.findAncestorStateOfType<ScaffoldState>();

of静态方法

 ScaffoldState _state = Scaffold.of(context);

通过GlobalKey

GlobalKey 是 Flutter提供的一种在整个App 中引用 element 的机制。如果 一个 widget 设置了 GlobalKey,那么我们便可以通过 globalKey.currentWidget 获得该 widget 对象,globalKey.currentElement 来获得widget对应的 element 对象,如果当前 widget 是 StatefulWidget ,则可以通过 globalKey.currentState 来获得该 widget 对应的 state 对象。

示例如下:

1.给目标 StatefuleWidget 添加 GlobalKey

2.通过 GlobalKey 来获取 Satate 对象

 GlobalKey<ChildState> childState = GlobalKey();
 ...//
  childState.currentState.xxxx

需要注意的是:GlobalKey开销较大,如果有其他可选方案,应尽量避免使用它,另外同一个 GlobalKey 在整个 widget树中必须是唯一,不能重复。

目录
相关文章
|
7天前
Flutter StreamBuilder 实现局部刷新 Widget
Flutter StreamBuilder 实现局部刷新 Widget
9 0
|
1月前
|
Android开发
Flutter完整开发实战详解(六、 深入Widget原理),2024百度Android岗面试真题收录解析
Flutter完整开发实战详解(六、 深入Widget原理),2024百度Android岗面试真题收录解析
|
1月前
|
开发框架 前端开发 搜索推荐
【Flutter前端技术开发专栏】Flutter中的自定义Widget与渲染流程
【4月更文挑战第30天】探索Flutter的自定义Widget与渲染流程。自定义Widget是实现复杂UI设计的关键,优点在于个性化设计、功能扩展和代码复用,但也面临性能优化和复杂性管理的挑战。创建步骤包括设计结构、定义Widget类、实现构建逻辑和处理交互。Flutter渲染流程涉及渲染对象树、布局、绘制和合成阶段。实践案例展示如何创建带渐变背景和阴影的自定义按钮。了解这些知识能提升应用体验并应对开发挑战。查阅官方文档以深入学习。
【Flutter前端技术开发专栏】Flutter中的自定义Widget与渲染流程
|
1月前
|
JavaScript 前端开发 开发者
【Flutter前端技术开发专栏】Flutter中的Widget与状态管理
【4月更文挑战第30天】本文探讨了Flutter的Widget和状态管理。Widget是Flutter构建UI的基础,分为有状态和无状态两种。状态管理确保UI随应用状态变化更新,影响应用性能和可维护性。文章介绍了`setState`、`Provider`、`Riverpod`、`Bloc`和`Redux`等状态管理方法,并通过计数器应用展示了其实现。选择合适的状态管理策略对高效开发至关重要。
【Flutter前端技术开发专栏】Flutter中的Widget与状态管理
|
1月前
|
编解码 算法 开发者
Flutter的布局系统:深入探索布局Widget与布局原则
【4月更文挑战第26天】Flutter布局系统详解,涵盖布局Widget(Row/Column、Stack、GridView/ListView、CustomSingleChildLayout)和布局原则(弹性布局、约束优先、流式布局、简洁明了)。文章旨在帮助开发者理解并运用Flutter的布局系统,创建适应性强、用户体验佳的界面。通过选择合适的布局Widget和遵循原则,可实现复杂且高效的UI设计。
|
1月前
|
前端开发 开发者 UED
Flutter的自定义Painter:深入探索自定义绘制Widget的技术实现
【4月更文挑战第26天】Flutter的自定义Painter允许开发者根据需求绘制独特UI,通过继承`CustomPaint`类和重写`paint`方法实现。在`paint`中使用`Canvas`绘制图形、路径等。创建自定义Painter类后,将其作为`CustomPaint` Widget的`painter`属性使用。此技术可实现自定义形状、渐变、动画等复杂效果,提升应用视觉体验。随着Flutter的进化,自定义Painter将提供更丰富的功能。
|
1月前
|
开发框架 搜索推荐 Android开发
Flutter的Widget基础:概念、分类与深入探索
【4月更文挑战第26天】Flutter Widget详解:基础、分类与工作原理。Widget是Flutter UI的核心,描述界面外观而非直接渲染。分为基础、布局、可滚动及状态管理四大类。基于响应式编程,状态变化时自动更新UI。了解其概念、分类和原理,能助开发者高效构建精美应用。随着Flutter生态发展,Widget系统潜力无限。
|
10月前
Flutter源码分析笔记:Widget类源码分析
本文记录阅读与分析Flutter源码 - Widget类源码分析。
74 0
Flutter源码分析笔记:Widget类源码分析
|
9月前
|
Dart 前端开发 开发工具
谷歌移动UI框架Flutter教程之Widget
谷歌移动UI框架Flutter教程之Widget
|
11月前
|
API Android开发 容器
Flutter控件之基类Widget封装
基类的Widget主要确定以下几个方面,第一就是,自定义一个抽象类还是非抽象类,第二、继承方式,采取有状态还是无状态,第三、关于组件的点击方式,如何进行实现。
125 0