Flutter子树管理插件subtree的使用

Flutter子树管理插件subtree的使用

简介

Subtree 是一个状态管理器，适用于喜欢 BLoC 但不喜欢其冗长性的开发者。它将状态注入与状态观察机制分离，并提供了一种紧凑的状态观察机制，而不是冗长的 Builder 概念。事件（动作）不是独立的对象，而是简单的函数调用，大大减少了样板代码。

BLoC 差异

• Subtree 将状态注入与状态观察机制分离。
• 提供了紧凑的状态观察机制，而不是冗长的 Builder 概念。
• 事件（动作）是简单的函数调用，而非独立对象，减少了样板代码。
• 不尝试进入所有应用层，仅限于表现层。

基本示例

class ExamplePageState {
  final title = ValueNotifier("...");
}

abstract class ExamplePageActions {
  void buttonClicked();
}

void build(BuildContext context) {
  final state = context.subtreeGet<ExamplePageState>(); // 获取子树状态
  final actions = context.subtreeGet<ExamplePageActions>(); // 获取子树动作

  // 监听 state.title 的变化
  return Obx((ref) =>
      TextButton(
          onPressed: actions.buttonClicked,
          child: Text(ref.watch(state.title))
      ));
}

在这个例子中，状态是一个简单的类，你可以向其中添加任何响应式原语。Obx 和 ref.watch 用于减少 ValueListenableBuilder 的冗长性。你可以监听任何实现了 ValueListenable 接口的原语。

如果需要，你也可以使用其他响应式原语和构建器，例如 StreamBuilder。

class ExamplePageState {
  final title = BehaviorSubject<String>();
}

void build(BuildContext context) {
  final state = context.subtreeGet<ExamplePageState>();

  return StreamBuilder<String>(
      stream: state.title,
      builder: (BuildContext context, AsyncSnapshot<String> titleSnapshot) {
        // 构建 UI
      });
}

计数器示例

通常，使用计数器示例来演示状态管理的使用。但是，这离实际用例有些远。让我们稍微复杂一些，假设计数器状态位于后端。

CounterAPI 类

abstract class CounterAPI {
  Future<int> getCounterValue();

  Future<int> incCounterValue();

  Future<int> decCounterValue();
}

CounterState 类

class CounterState {
  final counter = Rx<int>(0);
  final loaded = Rx<bool>(false);
  final blocked = Rx<bool>(false);
}

CounterActions 抽象类

abstract class CounterActions {
  void incCounter();

  void decCounter();
}

CounterController 类

class CounterController extends SubtreeController implements CounterActions {
  final state = CounterState();

  @protected
  final CounterAPI counterAPI;

  CounterController({required this.counterAPI}) {
    subtree.put(state);
    subtree.put<CounterActions>(this);
    loadData();
  }

  void loadData() async {
    final counter = await counterAPI.getCounterValue();
    state.counter.value = counter;
    state.loaded.value = true;
  }

  @override
  void incCounter() async {
    state.blocked.value = true;

    final newCounterValue = await counterAPI.incCounterValue();
    state.counter.value = newCounterValue;

    state.blocked.value = false;
  }

  @override
  void decCounter() async {
    state.blocked.value = true;

    final newCounterValue = await counterAPI.decCounterValue();
    state.counter.value = newCounterValue;

    state.blocked.value = false;
  }
}

CounterScreen 类

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

  @override
  Widget build(BuildContext context) {
    final state = context.get<CounterState>();
    final actions = context.get<CounterActions>();

    return Scaffold(
        appBar: AppBar(title: const Text('Counter')),
        body: Obx((ref) {
          if (!ref.watch(state.loaded)) {
            return const Center(child: CircularProgressIndicator());
          }
          return Stack(children: [
            Center(
              child: Column(children: [
                Text('Counter: ${ref.watch(state.counter)}'),
                MaterialButton(
                  onPressed: actions.incCounter,
                  child: const Text('+'),
                ),
                MaterialButton(
                  onPressed: actions.decCounter,
                  child: const Text('-'),
                )
              ]),
            ),
            if (ref.watch(state.blocked)) ...[
              const Opacity(
                opacity: 0.2,
                child: ModalBarrier(dismissible: false, color: Colors.black),
              ),
              const Center(child: CircularProgressIndicator())
            ]
          ]);
        }));
  }
}

绑定所有组件

ControlledSubtree(
  subtree: const CounterScreen(),
  controller: () => CounterController(counterAPI: services.counterAPI),
);

由于子树小部件和控制器之间不直接依赖，它们可以独立测试。你还可以为不同的平台提供不同的小部件，或者为演示模式提供具有预设数据的模拟控制器。

ControlledSubtree(
  subtree: isDesktop ? const CounterScreenDesktop() : const CounterScreen(),
  controller: () => isDemo ? MockCounterController() : CounterController(counterAPI: services.counterAPI),
);