Flutter数据监听与构建插件watcher_builder的使用

Flutter数据监听与构建插件watcher_builder的使用

NEW!

随着版本1.1.0的发布，你现在可以使用.watch方法创建任何类型的VarWatcher实例，这将使你更容易监控变量。此外，版本1.1.0还简化了构建器的方法。例如，你可以调用watcher上的.build()方法，并传入构建器函数。

final watcher = 0.watch;
// 这将在watcher上调用notify时自动重新构建
Widget watcherBuilder = watcher.build((value) => Text('value = $value'));

我们进一步简化了构建器，通过在VarWatcher上引入一个新的操作符。

Widget simple = watcher >> (value) => Text('value = $value');

同样地，如果你声明一个VarWatcher列表，也可以调用相同的方法和操作符。

final watchers = [
  0.watch,
  0.watch,
  0.watch,
];
Widget watchersBuilder = watchers.build(
  () => Column(children: watchersBuilder.map((w) => 
    Text('value = ${w.value}')).toList())
);
// 或者
Widget simple2 = watchers >> Column(children: watchersBuilder.map((w) => 
  Text('value = ${w.value}')).toList());

特性

WatcherBuilder是Flutter中最简单的状态管理方式。你所要做的就是声明一个VarWatcher，在WatcherBuilder内部使用它，并在需要更新/重新构建其小部件时调用notify。

使用方法

[@override](/user/override)  
Widget build(BuildContext context) {  
  final counter = VarWatcher(0);  
  return Scaffold(  
    body: Center(  
      child: Column(  
        mainAxisAlignment: MainAxisAlignment.center,  
        children: [  
          WatcherBuilder(  
            watch: counter,  
            builder: (context, value) => Text('Counter = $value'),  
          ),  
          OutlinedButton(  
            onPressed: () {  
              counter.value++;  
              counter.notify();  
            },  
            child: const Text('Increment'),  
          )  
        ],  
      ),  
    ),  
  );  
}

额外信息

你还可以使用WatchersBuilder来监控多个VarWatchers。

示例代码

以下是example/main.dart文件中的完整示例：

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

void main() {
  runApp(const MaterialApp(
    home: Example(),
  ));
}

class Example extends StatelessWidget {
  const Example({super.key});

  [@override](/user/override)
  Widget build(BuildContext context) {
    final counter = 0.watch;
    final counters = [
      0.watch,
      0.watch,
      0.watch,
    ];
    return Scaffold(
      body: SizedBox(
        width: MediaQuery.sizeOf(context).width,
        child: Center(
          child: Row(
            mainAxisAlignment: MainAxisAlignment.center,
            crossAxisAlignment: CrossAxisAlignment.center,
            children: [
              Column(
                mainAxisAlignment: MainAxisAlignment.center,
                crossAxisAlignment: CrossAxisAlignment.center,
                children: [
                  // 示例1：基本的WatcherBuilder
                  WatcherBuilder(
                    watch: counter,
                    builder: (context, value) => Text('Counter = $value'),
                  ),
                  // 示例2：从变量中获取简单的构建器函数
                  counter.build((value) => Text('Counter = $value')),
                  // 示例3：更简单的构建器操作符
                  counter >> (value) => Text('Counter = $value'),
                  OutlinedButton(
                    onPressed: () {
                      counter.value++;
                      counter.notify();
                    },
                    child: const Text('Increment'),
                  )
                ],
              ),
              const SizedBox(width: 100),
              Column(
                mainAxisAlignment: MainAxisAlignment.center,
                children: [
                  // 示例1：基本的WatcherBuilder
                  WatchersBuilder(
                    watchers: counters,
                    builder: (context) {
                      return Column(
                        children: counters
                            .map((w) => Text('Counter = ${w.value}'))
                            .toList(),
                      );
                    },
                  ),
                  // 示例2：从变量中获取简单的构建器函数
                  counters.build(() {
                    return Column(
                      children: counters
                          .map((w) => Text('Counter = ${w.value}'))
                          .toList(),
                    );
                  }),
                  // 示例3：更简单的构建器操作符
                  counters >> 
                      () {
                        return Column(
                          children: counters
                              .map((w) => Text('Counter = ${w.value}'))
                              .toList(),
                        );
                      },
                  OutlinedButton(
                    onPressed: () {
                      for (var c in counters) {
                        c.value += 1 + counters.indexOf(c);
                      }
                    },
                    child: const Text('Increment'),
                  )
                ],
              ),
            ],
          ),
        ),
      ),
    );
  }
}