Flutter & 鸿蒙 Next 刷新机制的高级使用【衍生详解】

作者：淼.

2025-03-14
北京
本文字数：2816 字
阅读完需：约 9 分钟

在现代应用开发中，刷新机制是提升用户体验和优化性能的关键。Flutter 和鸿蒙 Next 都提供了强大的刷新机制，帮助开发者高效地管理状态和更新 UI。本文将深入探讨 Flutter 和鸿蒙 Next 的刷新机制，包括状态管理、Widget 重建、性能优化以及高级使用技巧。

一、Flutter 刷新机制详解

（一）刷新机制概述

在 Flutter 中，刷新机制主要围绕 StatefulWidget 和 StatelessWidget 的重建而展开。每当状态变化或依赖的对象发生变化时，Flutter 会决定何时重建 Widgets。这个过程通常包括以下几个步骤：

调用 setState：当你调用 setState 方法时，Flutter 会标记当前的状态为“脏”。
调度构建：标记为“脏”的状态会被加入到 Flutter 的构建队列中，等待下一帧的渲染。
调用 build 方法：Flutter 会重新调用与标记的状态关联的 build 方法来生成新的 Widget 树。
比较 Widget 树：Flutter 通过 Widget 树的差异（Diffing）来确定哪些部分需要更新，从而最小化重建的 Widget。
渲染更新：最终，只有需要更新的部分会被渲染到屏幕上。

（二）Widget 刷新的种类

1. `StatelessWidget`

描述：StatelessWidget 是不可变的，每当需要更新 UI 时，整个 Widget 会被重建。
使用场景：适合用来构建静态内容或数据不会变化的场景。

2. `StatefulWidget`

描述：StatefulWidget 是可变的，能够在 Widget 生命周期内保存状态。当状态变化时，可以通过 setState 方法更新 UI。
使用场景：适合需要交互或动态数据变化的场景。

3. `InheritedWidget`

描述：InheritedWidget 用于在 Widget 树中共享数据。子 Widget 可以订阅它的变化，从而在数据变化时重新构建。
使用场景：适合需要跨多个 Widget 共享状态的场景。

（三）使用 `setState` 的最佳实践

1. 精简 `setState` 的使用

使用 setState 时，应尽量只更新需要变化的部分。避免在 setState 中执行复杂的逻辑或多次更新，这会导致不必要的重建。

void _updateCounter() {  setState(() {    _counter++; // 只更新计数器的值  });}

复制代码

2. 延迟执行

在需要进行多个状态更新时，可以使用 Future.microtask 或 SchedulerBinding.instance.addPostFrameCallback 延迟更新 UI，确保不会重复调用 setState。

void _delayedUpdate() {  Future.microtask(() {    setState(() {      // 更新多个状态    });  });}

复制代码

（四）Widget 树的高效更新

1. 使用 `const` 构造函数

通过使用 const 构造函数来创建不可变的 Widget，Flutter 可以更高效地重用这些 Widget，减少重新构建的次数。

const Text('Hello, World!'); // 这个 Widget 是不可变的

复制代码

2. 使用 `ValueNotifier` 和 `ValueListenableBuilder`

使用 ValueNotifier 和 ValueListenableBuilder 可以简化状态管理，只在相关值变化时更新 UI，而不是整个 Widget。

class Counter {  ValueNotifier<int> count = ValueNotifier(0);
  void increment() {    count.value++;  }}
// 在 UI 中使用ValueListenableBuilder(  valueListenable: counter.count,  builder: (context, value, child) {    return Text('Count: $value');  },);

复制代码

（五）使用 `InheritedWidget` 共享状态

InheritedWidget 是 Flutter 中一种强大的状态管理方式，可以在 Widget 树中共享数据。当状态变化时，所有依赖该状态的子 Widget 都会自动更新。

1. 创建自定义的 `InheritedWidget`

class MyInheritedWidget extends InheritedWidget {  final int data;
  MyInheritedWidget({required this.data, required Widget child})      : super(child: child);
  static MyInheritedWidget? of(BuildContext context) {    return context.dependOnInheritedWidgetOfExactType();  }
  @override  bool updateShouldNotify(MyInheritedWidget oldWidget) {    return oldWidget.data != data; // 判断是否需要更新  }}

复制代码

2. 使用自定义的 `InheritedWidget`

在子 Widget 中，可以使用 MyInheritedWidget.of(context) 来访问共享的数据。

@overrideWidget build(BuildContext context) {  final inheritedData = MyInheritedWidget.of(context)!.data;  return Text('Inherited Data: $inheritedData');}

复制代码

（六）高级状态管理解决方案

对于更复杂的应用，可能需要使用一些状态管理库来处理 Widget 刷新，例如：

Provider：轻量级的状态管理库，基于 InheritedWidget，易于使用且灵活。
Bloc：基于流的状态管理，适合处理复杂的业务逻辑。
Riverpod：提供更强大的功能与可组合性，适用于各种类型的 Flutter 应用。

（七）性能优化技巧

1. 减少 Widget 重建

使用 const：对于静态内容，使用 const 构造函数，避免不必要的重建。
使用 Key：为需要独立重建的 Widget 提供唯一的 Key，避免不必要的重建。

2. 使用 `LayoutBuilder` 和 `AnimatedBuilder`

LayoutBuilder：在布局阶段动态调整 Widget 的大小。
AnimatedBuilder：在动画过程中高效更新 UI。

二、鸿蒙 Next 刷新机制详解

（一）刷新机制概述

鸿蒙 Next 提供了强大的刷新机制，支持下拉刷新、触底加载等功能。这些机制通过 Refresh 和 List 组件实现，能够高效地管理列表数据的刷新和加载。

（二）下拉刷新与触底加载

1. 下拉刷新

鸿蒙 Next 提供了 Refresh 组件，支持自定义刷新区域的内容和样式。

@Entry@Componentstruct PullRefresh {  @State isRefreshing: boolean = false // 是否正在刷新  @State promptText: string = '' // 下拉提示文字  @State refreshStatus: number = 0 // 刷新状态  @State list: number[] = [] // 列表数据  @State lastTime: string = this.getDateTime() // 上次刷新时间
  aboutToAppear(): void {    this.getList()  }
  // 获取列表数据  getList() {    // 模拟接口获取列表数据    setTimeout(() => {      for (let i = 0; i < 20; i++) {        this.list.push(i)      }      // 关闭下拉刷新      this.isRefreshing = false    }, 1000)  }
  // 获取当前日期时间 MM-dd HH:ss  getDateTime() {    let date: Date = new Date()    let month = (date.getMonth() + 1).toString().padStart(2, '0')    let day = date.getDate().toString().padStart(2, '0')    let hour = date.getHours().toString().padStart(2, '0')    let minus = date.getMinutes().toString().padStart(2, '0')    return `${month}-${day} ${hour}:${minus}`  }
  // 自定义刷新区域内容  @Builder customRefreshComponent() {    Row({ space: 15 }) {      // 下拉刷新      if (this.refreshStatus === RefreshStatus.Drag) {        Image($r('app.media.arrow_down')).width(20)      }      // 释放刷新      else if (this.refreshStatus === RefreshStatus.OverDrag) {        Image($r('app.media.arrow_up')).width(20)      }      // 刷新中      else if (this.refreshStatus === RefreshStatus.Refresh) {        Image($

复制代码

发布于: 刚刚阅读数: 4

淼.

关注

还未添加个人签名 2022-10-24 加入

还未添加个人简介

发布

暂无评论

创作场景

Flutter & 鸿蒙 Next 刷新机制的高级使用【衍生详解】

一、Flutter 刷新机制详解

（一）刷新机制概述

（二）Widget 刷新的种类

1. StatelessWidget

2. StatefulWidget

3. InheritedWidget

（三）使用 setState 的最佳实践

1. 精简 setState 的使用

2. 延迟执行

（四）Widget 树的高效更新

1. 使用 const 构造函数

2. 使用 ValueNotifier 和 ValueListenableBuilder

（五）使用 InheritedWidget 共享状态

1. 创建自定义的 InheritedWidget

2. 使用自定义的 InheritedWidget

（六）高级状态管理解决方案

（七）性能优化技巧

1. 减少 Widget 重建

2. 使用 LayoutBuilder 和 AnimatedBuilder

二、鸿蒙 Next 刷新机制详解

（一）刷新机制概述

（二）下拉刷新与触底加载

1. 下拉刷新

淼.

评论

1. `StatelessWidget`

2. `StatefulWidget`

3. `InheritedWidget`

（三）使用 `setState` 的最佳实践

1. 精简 `setState` 的使用

1. 使用 `const` 构造函数

2. 使用 `ValueNotifier` 和 `ValueListenableBuilder`

（五）使用 `InheritedWidget` 共享状态

1. 创建自定义的 `InheritedWidget`

2. 使用自定义的 `InheritedWidget`

2. 使用 `LayoutBuilder` 和 `AnimatedBuilder`