WEBKT

Flutter中使用ValueListenableBuilder避免不必要重建的优化技巧

152 0 0 0

在Flutter开发中，ValueListenableBuilder 是一个非常实用的widget，它允许我们监听 ValueNotifier 的变化，并根据变化自动重建UI。然而，如果不小心使用，ValueListenableBuilder 可能会导致不必要的widget重建，从而影响应用的性能。本文将深入探讨如何优化 ValueListenableBuilder，以避免不必要的重建，特别是那些不依赖于 ValueNotifier 值的子widget。

ValueListenableBuilder 的基本原理

首先，让我们回顾一下 ValueListenableBuilder 的基本用法。它接受一个 ValueListenable 对象（通常是 ValueNotifier），并在 ValueListenable 的值发生变化时，调用其 builder 函数来重建widget。

ValueNotifier<int> counter = ValueNotifier<int>(0);

ValueListenableBuilder<int> buildCounterDisplay() {
  return ValueListenableBuilder<int>(
    valueListenable: counter,
    builder: (BuildContext context, int value, Widget? child) {
      return Text('Counter value: $value');
    },
  );
}

在上面的例子中，每当 counter 的值发生变化时，Text widget 都会被重建。这在大多数情况下是合理的，因为 Text widget 依赖于 counter 的值。

问题：不必要的重建

问题在于，如果 ValueListenableBuilder 的父widget包含其他不依赖于 ValueNotifier 值的子widget，那么这些子widget也会随着 ValueListenableBuilder 的重建而重建。这会导致性能浪费，尤其是在子widget比较复杂的情况下。

例如：

Column(
  children: <Widget>[
    ExpensiveWidget(), // 不依赖 counter
    ValueListenableBuilder<int>(
      valueListenable: counter,
      builder: (BuildContext context, int value, Widget? child) {
        return Text('Counter value: $value');
      },
    ),
    AnotherExpensiveWidget(), // 也不依赖 counter
  ],
)

在这个例子中，ExpensiveWidget 和 AnotherExpensiveWidget 并不依赖于 counter 的值，但它们仍然会随着 ValueListenableBuilder 的重建而重建。这显然是不必要的。

解决方案：使用 child 参数

ValueListenableBuilder 的 builder 函数提供了一个 child 参数，我们可以利用这个参数来避免不必要的重建。child 参数允许我们将不需要重建的子widget传递给 ValueListenableBuilder，并在重建时重用它们。

以下是如何使用 child 参数来优化上面的例子：

final expensiveWidget = ExpensiveWidget();
final anotherExpensiveWidget = AnotherExpensiveWidget();

Column(
  children: <Widget>[
    expensiveWidget, // 不依赖 counter，直接使用
    ValueListenableBuilder<int>(
      valueListenable: counter,
      builder: (BuildContext context, int value, Widget? child) {
        return Column(
          children: [
            Text('Counter value: $value'),
            child!,
          ],
        );
      },
      child: anotherExpensiveWidget, // 将不需要重建的widget传递给 child
    ),
  ],
)

在这个优化后的例子中，ExpensiveWidget 被直接使用，因为它不需要重建。AnotherExpensiveWidget 被传递给 ValueListenableBuilder 的 child 参数。这意味着 AnotherExpensiveWidget 只会被创建一次，并在 ValueListenableBuilder 重建时被重用。只有 Text widget 会随着 counter 的变化而重建。

深入理解 context 参数

ValueListenableBuilder 的 builder 方法还提供了一个 context 参数，这个 context 参数非常重要，因为它关联着widget树中的位置。不恰当的使用 context 可能会导致widget重建，即使它们不直接依赖 ValueNotifier 的值。

例如，如果在 builder 方法中使用 Theme.of(context) 或 MediaQuery.of(context)，那么当主题或屏幕尺寸发生变化时，ValueListenableBuilder 也会重建，即使 ValueNotifier 的值没有变化。为了避免这种情况，可以将这些依赖于主题或屏幕尺寸的widget移到 ValueListenableBuilder 之外，或者使用 child 参数将它们传递给 ValueListenableBuilder。

最佳实践总结

以下是一些使用 ValueListenableBuilder 避免不必要重建的最佳实践：

  1. 识别不需要重建的子widget：首先，确定哪些子widget不依赖于 ValueNotifier 的值。这些widget是可以被优化的对象。
  2. 使用 child 参数：将不需要重建的子widget传递给 ValueListenableBuilder 的 child 参数。这样可以确保它们只会被创建一次，并在重建时被重用。
  3. 避免在 builder 方法中使用不必要的 context 依赖：尽量避免在 builder 方法中使用 Theme.of(context) 或 MediaQuery.of(context) 等依赖于上下文的函数。如果必须使用，考虑将相关的widget移到 ValueListenableBuilder 之外。
  4. 使用 const 关键字：对于静态的、不依赖于任何状态的widget，可以使用 const 关键字来标记它们。这样可以告诉Flutter编译器，这些widget是不可变的，可以被安全地重用。
  5. 谨慎使用 Key：在某些情况下，使用 Key 可以帮助Flutter更好地识别和重用widget。但是，不恰当的使用 Key 可能会导致不必要的重建。因此，应该谨慎使用 Key，只在必要的时候使用。

案例分析

假设我们有一个显示股票价格的widget。股票价格通过 ValueNotifier 来更新。同时，widget还包含一个显示公司logo的 Image widget，这个 Image widget 并不依赖于股票价格。

ValueNotifier<double> stockPrice = ValueNotifier<double>(100.0);

Column(
  children: <Widget>[
    Image.network('https://example.com/company_logo.png'), // 公司logo
    ValueListenableBuilder<double>(
      valueListenable: stockPrice,
      builder: (BuildContext context, double value, Widget? child) {
        return Text('Stock Price: $value');
      },
    ),
  ],
)

在这个例子中，Image.network widget 会随着股票价格的更新而重建。为了避免这种情况，我们可以使用 child 参数：

final logo = Image.network('https://example.com/company_logo.png');

Column(
  children: <Widget>[
    logo, // 公司logo，直接使用
    ValueListenableBuilder<double>(
      valueListenable: stockPrice,
      builder: (BuildContext context, double value, Widget? child) {
        return Column(
          children: [
            Text('Stock Price: $value'),
          ],
        );
      },
    ),
  ],
)

通过这种方式，Image.network widget 只会被创建一次，并在股票价格更新时被重用，从而提高了性能。

结论

ValueListenableBuilder 是一个强大的工具，可以帮助我们构建响应式的Flutter应用。但是，为了避免不必要的widget重建，我们需要仔细考虑如何使用它。通过使用 child 参数、避免不必要的 context 依赖以及遵循其他最佳实践，我们可以最大限度地提高应用的性能。理解这些优化技巧对于构建高性能的Flutter应用至关重要。

Widget优化大师 FlutterValueListenableBuilder性能优化

评论点评