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树中必须是唯一,不能重复。

目录
相关文章
|
15天前
深入理解Flutter鸿蒙next版本 中的Widget继承:使用extends获取数据与父类约束
本文详细介绍了Flutter中如何通过继承其他Widget来创建自定义组件。首先解释了Widget继承的基本概念,包括StatelessWidget和StatefulWidget的区别。接着通过具体示例展示了如何继承StatelessWidget和StatefulWidget,并在子类中访问父类的build方法和状态。最后,结合多个自定义Widget展示了如何在实际应用中灵活使用继承和组合来构建复杂的UI。
66 8
|
13天前
|
容器
flutter&鸿蒙next 使用 InheritedWidget 实现跨 Widget 传递状态
在 Flutter 中,状态管理至关重要。本文详细介绍了如何使用 InheritedWidget 实现跨 Widget 的状态传递。InheritedWidget 允许数据在 Widget 树中向下传递,适用于多层嵌套的场景。通过一个简单的计数器示例,展示了如何创建和使用 InheritedWidget,包括其基础概念、工作原理及代码实现。虽然 InheritedWidget 较底层,但它是许多高级状态管理解决方案的基础。
88 2
|
1月前
|
容器
flutter:第一个flutter&Widget的使用 (二)
本文介绍了Flutter框架下的基本组件及其用法,包括简单的 Stateless Widget 如文本和按钮,以及更复杂的 StatefulWidget 示例。详细解释了如何使用 `context` 获取祖先小部件的信息,并展示了 `MaterialApp` 的属性及用途。此外,还探讨了 `StatefulWidget` 与 `StatelessWidget` 的区别,以及 `AppBar` 的常见属性配置方法。适合Flutter初学者参考学习。
|
13天前
|
Dart JavaScript 前端开发
Flutter 的 Widget 概述与常用 Widgets 与鸿蒙 Next 的对比
Flutter 是 Google 开发的开源 UI 框架,用于快速构建高性能的移动、Web 和桌面应用。Flutter 通过 Widget 构建 UI,每个 UI 元素都是 Widget,包括文本、按钮、图片等。Widget 不仅描述外观,还描述行为,是不可变的。常见的 Widget 包括结构型(Container、Column、Row)、呈现型(Text、Image)、交互型(ElevatedButton)和状态管理型(StatefulWidget)。Flutter 与鸿蒙 Next 在组件化架构、开发语言、布局系统、性能和跨平台支持方面各有优势
64 0
|
4月前
Flutter-底部弹出框(Widget层级)
文章描述了如何在Flutter中使用DraggableScrollableSheet创建一个底部弹出框,同时保持其可手势滑动关闭。作者遇到问题并提出对原控件进行扩展,以支持头部和列表布局的滑动关闭功能。
180 0
|
5月前
Flutter StreamBuilder 实现局部刷新 Widget
Flutter StreamBuilder 实现局部刷新 Widget
43 0
|
6月前
|
Android开发
Flutter完整开发实战详解(六、 深入Widget原理),2024百度Android岗面试真题收录解析
Flutter完整开发实战详解(六、 深入Widget原理),2024百度Android岗面试真题收录解析
|
6月前
|
开发框架 前端开发 搜索推荐
【Flutter前端技术开发专栏】Flutter中的自定义Widget与渲染流程
【4月更文挑战第30天】探索Flutter的自定义Widget与渲染流程。自定义Widget是实现复杂UI设计的关键,优点在于个性化设计、功能扩展和代码复用,但也面临性能优化和复杂性管理的挑战。创建步骤包括设计结构、定义Widget类、实现构建逻辑和处理交互。Flutter渲染流程涉及渲染对象树、布局、绘制和合成阶段。实践案例展示如何创建带渐变背景和阴影的自定义按钮。了解这些知识能提升应用体验并应对开发挑战。查阅官方文档以深入学习。
76 0
【Flutter前端技术开发专栏】Flutter中的自定义Widget与渲染流程
|
6月前
|
JavaScript 前端开发 开发者
【Flutter前端技术开发专栏】Flutter中的Widget与状态管理
【4月更文挑战第30天】本文探讨了Flutter的Widget和状态管理。Widget是Flutter构建UI的基础,分为有状态和无状态两种。状态管理确保UI随应用状态变化更新,影响应用性能和可维护性。文章介绍了`setState`、`Provider`、`Riverpod`、`Bloc`和`Redux`等状态管理方法,并通过计数器应用展示了其实现。选择合适的状态管理策略对高效开发至关重要。
85 0
【Flutter前端技术开发专栏】Flutter中的Widget与状态管理
|
6月前
|
编解码 算法 开发者
Flutter的布局系统:深入探索布局Widget与布局原则
【4月更文挑战第26天】Flutter布局系统详解,涵盖布局Widget(Row/Column、Stack、GridView/ListView、CustomSingleChildLayout)和布局原则(弹性布局、约束优先、流式布局、简洁明了)。文章旨在帮助开发者理解并运用Flutter的布局系统,创建适应性强、用户体验佳的界面。通过选择合适的布局Widget和遵循原则,可实现复杂且高效的UI设计。