Flutter响应式数据绑定插件flutter_reactive_value的使用

Flutter响应式数据绑定插件flutter_reactive_value的使用

flutter_reactive_value 是一个用于Flutter的库，它提供了一种机制，使UI能够响应性地更新以反映数据模型中底层值的变化。这是目前最简单的状态管理和响应式UI更新解决方案，相比其他复杂的状态管理方法，它可以减少样板代码。

使用步骤

1. 在 pubspec.yaml 中添加依赖（将 any 替换为最新版本，如果你需要控制版本），然后运行 flutter pub get：

   dependencies:
     flutter:
       sdk: flutter
     flutter_reactive_value: any
   

2. 在Flutter项目中导入该包：

   import 'package:flutter_reactive_value/flutter_reactive_value.dart';
   

3. 使用 ReactiveValueNotifier<T> 代替标准的 ValueNotifier<T> 来声明你希望UI监听其变化的值：

   final counter = ReactiveValueNotifier(0);
   

4. 构建UI时，使用 ReactiveValueNotifier.reactiveValue(BuildContext) 方法来读取值并订阅其变化：

   class HomeView extends StatelessWidget {
     const HomeView({Key? key}) : super(key: key);
   
     [@override](/user/override)
     Widget build(BuildContext context) {
       return Scaffold(
         body: Center(
           child: Text(
             // 读取值并订阅变化
             'The count is: ${counter.reactiveValue(context)}',
             style: const TextStyle(fontSize: 20),
           ),
         ),
         floatingActionButton: FloatingActionButton(
           onPressed: () {
             // 更新值
             counter.value++;
           },
           tooltip: 'Increment',
           child: const Icon(Icons.plus_one_outlined),
         ),
       );
     }
   }
   

   每当 counter.value 发生变化时（例如通过 counter.value++ 在 onPressed 回调中），包含该 BuildContext 的父级小部件（在这里是 HomeView）将被安排重新构建。

   注意：不允许在小部件的 build 方法中更新 counter.value，因为状态变化在 build 方法中是不允许的。

   不需要手动释放 ValueNotifier 监听器——它会在值变化时自动移除，并在每次重新构建时重新添加。

优化UI更新

如果你有一个深度嵌套的小部件树，并且不希望每次只有一个值变化时就重建整个子树，可以使用 Builder 引入一个新的 BuildContext，从而限制更新的区域。

优化前：

Container(
  child: Text('${counter.reactiveValue(context)}'),
),

优化后：

Container(
  child: Builder(
    builder: (subContext) => Text('${counter.reactiveValue(subContext)}'),
  ),
),

通知深层变化

如果你尝试用 ValueNotifier 包装一个集合或对象（例如使用 ValueNotifier<Set<T>> 来跟踪一组值），那么修改字段或添加/删除集合中的值不会通知 ValueNotifier 的监听器（因为值本身没有变化）。在这种情况下，你可以调用扩展方法 notifyChanged() 手动通知监听器。例如：

final tags = ReactiveValueNotifier<Set<String>>({});

void addOrRemoveTag(String tag, bool add) {
  if ((add && tags.value.add(tag)) || (!add && tags.value.remove(tag))) {
    tags.notifyChanged();
  }
}

完整示例Demo

以下是一个完整的示例，展示了如何使用 flutter_reactive_value 实现一个简单的计数器应用：

import 'package:flutter/material.dart';
import 'package:flutter_reactive_value/flutter_reactive_value.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Reactive Value Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: HomeView(),
    );
  }
}

class HomeView extends StatelessWidget {
  final counter = ReactiveValueNotifier(0); // 声明一个响应式的计数器

  HomeView({Key? key}) : super(key: key);

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Flutter Reactive Value Demo'),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            Text(
              'You have pushed the button this many times:',
            ),
            Text(
              // 读取值并订阅变化
              'The count is: ${counter.reactiveValue(context)}',
              style: Theme.of(context).textTheme.headline4,
            ),
          ],
        ),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: () {
          // 更新值
          counter.value++;
        },
        tooltip: 'Increment',
        child: Icon(Icons.plus_one_outlined),
      ),
    );
  }
}