Flutter 世界里数据的变动，都在这里

2024-01-17 18:15:14

构建与数据同步的 UI

构建响应式 UI 是 Flutter 开发的基石。Flutter 提供了多种用于数据监听的组件，可以帮助您轻松实现这一目标。

ValueListenableBuilder

ValueListenableBuilder 是一个泛型构建器，可以将 ValueListenable 和构建器函数结合在一起，构建一个小部件。ValueListenable 是一个对象，它可以发出值的更改通知。当 ValueListenable 的值发生更改时，ValueListenableBuilder 将调用构建器函数来重新构建小部件。

例如，以下代码使用 ValueListenableBuilder 来构建一个文本小部件，该文本小部件显示一个计数器变量的值：

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

StreamBuilder

StreamBuilder 与 ValueListenableBuilder 类似，但它用于监听 Stream 而不是 ValueListenable。Stream 是一种异步数据源，它可以按顺序发出数据事件。当 Stream 发出数据事件时，StreamBuilder 将调用构建器函数来重新构建小部件。

例如，以下代码使用 StreamBuilder 来构建一个文本小部件，该文本小部件显示一个异步计数器变量的值：

StreamBuilder(
  stream: counter.stream,
  builder: (BuildContext context, AsyncSnapshot<int> snapshot) {
    if (snapshot.hasData) {
      return Text('Count: ${snapshot.data}');
    } else {
      return Text('Loading...');
    }
  },
)

InheritedWidget

InheritedWidget 是一个基类，用于构建可以向其子项提供数据的构建器。要使用 InheritedWidget，您需要创建一个扩展 InheritedWidget 的类，并实现 updateShouldNotify() 方法。updateShouldNotify() 方法负责确定子项是否需要重新构建。

例如，以下代码使用 InheritedWidget 来构建一个计数器变量，该计数器变量可以由其子项访问：

class CounterInheritedWidget extends InheritedWidget {
  final int counter;

  const CounterInheritedWidget({
    Key? key,
    required this.counter,
    required Widget child,
  }) : super(key: key, child: child);

  static CounterInheritedWidget of(BuildContext context) {
    return context.dependOnInheritedWidgetOfExactType<CounterInheritedWidget>()!;
  }

  @override
  bool updateShouldNotify(CounterInheritedWidget oldWidget) {
    return counter != oldWidget.counter;
  }
}

然后，您可以使用 CounterInheritedWidget 来构建一个文本小部件，该文本小部件显示计数器变量的值：

class CounterText extends StatelessWidget {
  const CounterText({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    final counter = CounterInheritedWidget.of(context).counter;
    return Text('Count: $counter');
  }
}