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

✅近期推荐：求职神器

https://bbs.csdn.net/topics/619384540

🔥欢迎大家订阅系列专栏：flutter_鸿蒙next

💬淼学派语录：只有不断的否认自己和肯定自己，才能走出弯曲不平的泥泞路，因为平坦的大路，太tm无趣了！

写在前面

[1. Flutter 刷新机制概述](#1. Flutter 刷新机制概述)

[2. Widget 刷新的种类](#2. Widget 刷新的种类)

[2.1 StatelessWidget](#2.1 StatelessWidget)

[2.2 StatefulWidget](#2.2 StatefulWidget)

[2.3 InheritedWidget](#2.3 InheritedWidget)

[3. 使用 setState 的最佳实践](#3. 使用 setState 的最佳实践)

[3.1 精简 setState 的使用](#3.1 精简 setState 的使用)

[3.2 延迟执行](#3.2 延迟执行)

[4. Widget 树的高效更新](#4. Widget 树的高效更新)

[4.1 使用 const 构造函数](#4.1 使用 const 构造函数)

[4.2 ValueNotifier 和 ValueListenableBuilder](#4.2 ValueNotifier 和 ValueListenableBuilder)

[5. 使用 InheritedWidget 共享状态](#5. 使用 InheritedWidget 共享状态)

[5.1 创建自定义的 InheritedWidget](#5.1 创建自定义的 InheritedWidget)

[5.2 使用自定义的 InheritedWidget](#5.2 使用自定义的 InheritedWidget)

[6. 高级状态管理解决方案](#6. 高级状态管理解决方案)

[7. 性能优化技巧](#7. 性能优化技巧)

[7.1 减少 Widget 重建](#7.1 减少 Widget 重建)

[7.2 使用 LayoutBuilder](#7.2 使用 LayoutBuilder)

[7.3 使用 AnimatedBuilder](#7.3 使用 AnimatedBuilder)

写在最后

写在前面

Flutter 是一个强大的 UI 框架，旨在高效地构建优美的用户界面。其刷新机制是 Flutter 性能的关键因素之一。理解 Flutter 的刷新机制不仅能帮助你优化应用性能，还能提升用户体验。本文将深入探讨 Flutter 的刷新机制，包括状态管理、重建、性能优化和一些高级使用技巧。

1. Flutter 刷新机制概述

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

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

2.1 `StatelessWidget`

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

2.2 `StatefulWidget`

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

2.3 `InheritedWidget`

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

3. 使用 `setState` 的最佳实践

3.1 精简 `setState` 的使用

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

Dart 复制代码

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

3.2 延迟执行

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

Dart 复制代码

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

4.1 使用 `const` 构造函数

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

Dart 复制代码

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

4.2 `ValueNotifier` 和 `ValueListenableBuilder`

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

Dart 复制代码

class Counter {
  ValueNotifier<int> count = ValueNotifier<int>(0);
  
  void increment() {
    count.value++;
  }
}

// 在 UI 中使用
ValueListenableBuilder<int>(
  valueListenable: counter.count,
  builder: (context, value, child) {
    return Text('Count: $value');
  },
);

5. 使用 `InheritedWidget` 共享状态

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

5.1 创建自定义的 `InheritedWidget`

Dart 复制代码

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<MyInheritedWidget>();
  }

  @override
  bool updateShouldNotify(MyInheritedWidget oldWidget) {
    return oldWidget.data != data; // 判断是否需要更新
  }
}

5.2 使用自定义的 `InheritedWidget`

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

Dart 复制代码

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

6. 高级状态管理解决方案

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

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

7. 性能优化技巧

使用 const : 对于静态内容，使用 const 构造函数，避免不必要的重建。
使用 RepaintBoundary: 将需要频繁更新的 Widget 与不需要更新的部分分离，可以提升性能。

7.2 使用 `LayoutBuilder`

使用 LayoutBuilder 可以根据父 Widget 的约束条件来决定如何构建子 Widget，优化布局性能。

7.3 使用 `AnimatedBuilder`

对于动画效果，使用 AnimatedBuilder 可以提高性能，因为它只重建依赖于动画的部分。

Dart 复制代码

AnimatedBuilder(
  animation: _controller,
  builder: (context, child) {
    return Transform.scale(
      scale: _controller.value,
      child: child,
    );
  },
  child: const Icon(Icons.star),
);

写在最后

理解 Flutter 的刷新机制和高效使用状态管理是提升应用性能的关键。通过精确地控制状态变化、减少不必要的重建和使用合适的状态管理解决方案，可以让你的应用在性能上表现得更加出色。希望本文能帮助你更好地理解 Flutter 的刷新机制，提升你的开发技巧！