Flutter集成React框架插件tiny_react的使用

tiny_react 是一个用于 ValueNotifier 和 ValueListenableBuilder 的语法糖库。通过使用 tiny_react，您可以使用 ValueNotifier 编写响应式编程（Reactive programming），而无需编写大量的样板代码。它还可以与 tiny_locator 结合使用，形成一个轻量级的状态管理库。

tiny_react 是一个非常小的库，只有不到100行代码（不包括注释），因此很容易理解其工作原理。正如其名所示，这是一个小型库，因此未来不会添加主要的新功能，但可能会添加一些只需要少量修改的功能。

开始使用

首先，您需要定义一个 ValueNotifier 并创建一个将使用 build 方法更新的 Widget。

class MyPage extends StatelessWidget {
  // 定义一个 ValueNotifier
  final count = 0.notif;

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        // 使用 build 方法创建一个 Widget
        child: count.build((val) => Text('$val')),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: () => count.value++, // 更新 ValueNotifier 的值
        child: const Icon(Icons.add),
      ),
    );
  }
}

使用方法

notif 是 ValueNotifier 的语法糖。对于 List/Map/Set 类型，可以使用 CollectionNotifier 子类。

// 定义 ValueNotifier
final num = 0.notif;
// final num = ValueNotifier(0);

final float = 0.0.notif;
// final float = ValueNotifier(0.0);

final boolean = false.notif;
// final boolean = ValueNotifier(false);

final str = 'abc'.notif;
// final str = ValueNotifier('abc');

final obj = MyClass().notif;
// final obj = ValueNotifier(MyClass());

final list = <int>[].notif;
// final list = CollectionNotifier(<int>[]);

final map = <String, int>{}.notif;
// final map = CollectionNotifier(<String, int>{});

// 定义可空的 ValueNotifier
final nNum = null.notif<int>();
// final nNum = ValueNotifier<int?>(null);

final nNum2 = 0.nNotif;
// final nNum2 = ValueNotifier<int?>(0);

final list = null.iNotif<List<int>>();
// final list = CollectionNotifier(<int>[]?);

build 方法是一个 ValueListenableBuilder 的语法糖。当 ValueNotifier 的值发生变化时，会调用 build 方法并传递新的值。

final count = 0.notif;
count.build((val) => Text('$val'));
/// 相当于
// ValueListenableBuilder<int>(
//   valueListenable: count,
//   builder: (_, v, __) => Text('$v'),
// )
/// 您也可以这样使用
// count((val) => Text('$val'));

如果更改了集合（如 List）的内容，则需要手动调用 notifyListeners 方法来通知监听器。

// 自动通知
num.value++;
// 集合对象需要手动通知
list
  ..value.add(num.value)
  ..notifyListeners();

如果您想同时观察多个值，可以直接从列表中调用 build 方法。

final count1 = 0.notif;
final count2 = 0.notif;
[count1, count2].build((vals) => Text('$vals'));

tiny_locator

tiny_locator 是一个小的服务定位器，作为服务的全局访问点。与 tiny_react 结合使用时，它成为 Flutter 的轻量级状态管理方法。

import 'package:flutter/material.dart';
import 'package:tiny_locator/tiny_locator.dart';
import 'package:tiny_react/tiny_react.dart';

class MyController {
  final num = 0.notif;
  final list = <int>[].notif;

  void doSomething() {
    num.value++;
    if (num.value % 2 == 0) {
      list
        ..value.add(num.value)
        ..notifyListeners();
    }
  }
}

void main() {
  locator.add(() => MyController());
  runApp(const MyApp());
}

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

  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      home: MyPage(),
    );
  }
}

class MyPage extends StatelessWidget {
  final controller = locator.get<MyController>();

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

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('MyPage')),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            const Text(
              'You have pushed the button this many times:',
            ),
            controller.num.build((val) => Text('$val')),
            controller.list.build((val) => Text('$val')),
          ],
        ),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: () => controller.doSomething(),
        child: const Icon(Icons.add),
      ),
    );
  }
}