Flutter插件simplex的介绍与使用

Flutter插件simplex简介

Simple SM 是一个简单的状态管理库，用于 Flutter 应用。它受到 GetX 的启发，API 相似，并且允许使用可变变量进行状态管理。

在使用 GetX 之前，我的团队和我搜索了无数其他的状态管理库。我们从 BLoC 开始，然后转向 MobX，接着转向 Riverpod。这些库的好处在于它们使状态非常“反应式”和“可观测”，但一个显著的缺点是它们都有大量的样板代码，并且要求使用不可变状态（MobX 除外，但它需要使用代码生成）。

我创建这个库是因为我在使用 GetX 的 builder 时遇到了一个错误，因为那个小部件包含了一些全局 getter，而我只想创建一些局部状态。此外，尽管 GetX 的文档很长，但不如我希望的那样清晰。因此，就有了这个库。

更具体地说，我希望能够实现以下两个目标：

1. 在 UI 和业务逻辑之间提供分离；
2. 通过减少尽可能多的样板代码来简化一些常见的操作。

特性

该库的核心包括两个类：SimpleController 和 SimpleView。前者是一个基类，其扩展将用于包含业务逻辑。后者是一个可以扩展以与 SimpleController 配合使用的 widget。

SimpleController

SimpleController 是一个简单控制器。你不能直接实例化它，所以要使用它，你需要创建一个子类。我们将使用 Flutter 的计数器应用作为示例。

class CounterController extends SimpleController {
  int counter = 0;
  
  void increment() {
    counter++;
    refresh();
  }
}

你可以对计数器变量进行任何操作，当你想要请求 UI 重建时，只需调用 refresh()。

现在，你可以对 SimpleController 做更多的事情。例如，如果你想在开始时不将计数器设置为 0，而是从数据库读取，这将需要异步操作，你可以这样做：

class CounterController extends SimpleController {
  int counter = 0;
  
  [@override](/user/override) 
  Future<void> onFirstReady() async {
    counter = await getCounterFromDatabase();
  }
}

下面是可以在 SimpleController 中重写的方法列表：

• onBound(): 当控制器绑定到 widget 时调用。它会为所有绑定到控制器的 widget 触发。
• onInit(): 控制器绑定到第一个 widget 后调用，并返回 void 类型。你可以在初始化这里做一些事情，但调用 refresh() 不会有立即效果。如果你希望在初始化后重建 widget，可以在 Future.then 回调中调用 refresh()：

  [@override](/user/override) 
  void onInit() {
    final counterFuture = getCounterFromDatabase();
    counterFuture.then((value) {
      counter = value;
      refresh();
    });
  }
  

• onFirstReady(): 当第一个 widget 准备好时调用。此方法只会被调用一次。此函数可以是异步的，并返回 FutureOr<void>。
• onReady(): 每次绑定到此控制器的 widget 准备好时调用。此函数也可以是异步的。
• onUnbind(): 当控制器从 widget 解绑时调用。它会为所有绑定到控制器的 widget 触发。
• onDispose(): 当控制器被丢弃时调用。此方法只会被调用一次。默认情况下，此方法会在所有绑定到 widget 的绑定被移除后被调用。但是，可以通过覆盖 keepAlive 属性为 true 来禁用此行为。

SimpleView

SimpleView 是一个可以用来绑定 SimpleController 并在调用 controller.refresh() 后重建的 widget。要使用它，你必须扩展它：

class CounterView extends SimpleView<CounterController> {
  const CounterView({
    Key? key,
    required super.controller,
    super.groupKey,
  });
  
  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Counter'),
      ),
      body: Center(
        child: Text(
          'You have pushed the button this many times:',
        ),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: controller.increment,
        tooltip: 'Increment',
        child: Icon(Icons.add),
      ),
    );
  }
}

另外，如果扩展一个小部件太麻烦，我还提供了 SimpleView 的两个其他具体扩展：SimpleComponent 和 SimpleBuilder。它们之间的区别在于 SimpleComponent 要求你传递一个 child，而 SimpleBuilder 要求你传递一个构建函数。

[@override](/user/override)
Widget build(BuildContext context) {
  return SimpleComponent(
    controller: controller,
    // 这里必须使用相同的 controller 实例
    child: ...
  );
}

或者

[@override](/user/override) 
Widget build(BuildContext context) {
  return SimpleBuilder(
    controller: controller,
    builder: (context, controller) {
      return ...;
    },
  );
}