Flutter 有众多的状态管理方案，我除了对 Provider 有一些了解外，其它的一概不熟悉，主要还是因为接触 Flutter 的时间太短。

我目前一直是用的原生的 setState，它已经能很好的满足我的需要了。并且它足够简单。我目前基于自己的业务场景似乎找不到任何去选用其它状态管理库的理由。

我一直认为对于一个库来讲，解决问题并保持简单好用是最重要的。如果背离了这个点，就很有可能导致过度设计。我见过一些人把我认为的最差实践当成了最佳实践，而他们却浑然不知。

当然使用 setState 时，也不是完全的裸用。我做了相当轻量级的封装，只有 110 行代码。我把它称为 PVState 架构模式。它既是一种和传统 MVC、MVP 平辈的架构模式，也是一个轻量级的状态管理方案。我们来一探究竟吧。

PVState 概念介绍

首先我封装了一个 BaseState，所有的 State 都直接或间接地继承了它。它的子类分为两种，P State 和 V State。P State 的全称是 Presenter State，它负责业务逻辑。V State 的全称是 View State，它负责 UI，主要是重写 build 方法建立数据和 Widget 的单向绑定关系。

它们的关系如图所示：

PVState 架构模式

这里有一个很重要的点是 V State 继承了 P State。

原则上来讲，所有与业务逻辑相关的方法、变量、表达式均定义在 P State 中。所有与 UI 相关的东西比如约束布局的 id、颜色、buildXXX 系列方法均定义在 V State 中。由于两者的继承关系，V State 可以无缝地访问 P State 中定义的各种方法、变量、表达式。

当要更新 UI 时，只需要在 P State 中调用 setState 即可。业务逻辑和 UI 实现了完全解耦，同时保持了简单。

由于这个架构模式很简单，相信你已经听懂了，接下来我们来分析一下我封装的源码。

PVState 源码分析

BaseState 的代码如下：

abstract class BaseState<T extends StatefulWidget> extends State<T> {
  static List<BasePagePStateMixin> pageStack = [];

  @override
  void initState() {
    super.initState();
    if (this is BasePagePStateMixin) {
      if (pageStack.isNotEmpty) {
        (pageStack.last).onPushNext();
      }
      pageStack.add(this as BasePagePStateMixin);
      scheduleMicrotask(() {
        (this as BasePagePStateMixin).onPush();
      });
    }
  }

  P? find<P extends BasePagePStateMixin>() {
    for (final element in pageStack.reversed) {
      if (element is P) {
        return element;
      }
    }
    return null;
  }

  @override
  void dispose() {
    super.dispose();
    if (this is BasePagePStateMixin) {
      (this as BasePagePStateMixin).onPop();
      int index = pageStack.indexOf(this as BasePagePStateMixin);
      pageStack.removeAt(index);
      if (index == pageStack.length - 1 && pageStack.isNotEmpty) {
        scheduleMicrotask(() {
          pageStack.last.onPopNext();
        });
      }
    }
  }
}

BaseState 目前做了两件事情，一是使用静态变量存储了所有的页面型 State，可以用来做路由栈监听，起到了 RouteAware 的作用。

什么是页面型 State 呢？这里我把 State 划分成了三种，分别是页面型 State、对话框型 State 和嵌入型 State。它们分别对应于整个页面的 StatefulWidget、整个对话框的 StatefulWidget 和嵌入到页面内的 StatefulWidget。原则上只有页面型 State 才有路由栈监听的能力，对吧？

不同型的 State 应继承不同型的 BaseState，源码如下：

abstract class BasePState<T extends StatefulWidget> extends BaseState<T> {
  @override
  Widget build(BuildContext context) {
    throw Exception('Do not call super.build()');
  }
}

/// For pages
abstract class BasePagePState<T extends StatefulWidget> extends BasePState<T>
    with BasePagePStateMixin {}

/// For dialogs
abstract class BaseDialogPState<T extends StatefulWidget> extends BasePState<T>
    with BaseDialogPStateMixin {}

/// For embedded widgets
abstract class BaseWidgetPState<T extends StatefulWidget> extends BasePState<T>
    with BaseWidgetPStateMixin {}

mixin BasePagePStateMixin {
  void onPush() {}

  void onPop() {}

  void onPushNext() {}

  void onPopNext() {}
}

mixin BaseDialogPStateMixin {}

mixin BaseWidgetPStateMixin {}

如图所示：

继承结构

此外，BaseState 还提供了 find 方法，用于在路由栈中向前查找 State，比如查找 AppState，进行一些全局的操作。这里可以使用 ValueNotifier 进行多页面的状态共享，我提供了简易方法：

ValueNotifier obs<V>(V? initialValue) {
  return ValueNotifier(initialValue);
}

最后，我提供了一个名为 Stateful 的通用 StatefulWidget，这样你就无需再为每一个 State 定义一个 StatefulWidget 了。源码如下：

class Stateful<T extends BasePState> extends StatefulWidget {
  final T state;
  final Map<String, dynamic>? arguments;

  static Stateful of<S extends BasePState>(
    S newState, {
    Key? key,
    Map<String, dynamic>? arguments,
  }) {
    return Stateful(
      key: key,
      state: newState,
      arguments: arguments,
    );
  }

  const Stateful({
    Key? key,
    required this.state,
    this.arguments,
  }) : super(key: key);

  @override
  State createState() {
    return state;
  }
}

使用方法如下：

void main() {
  runApp(Stateful.of(CounterVState()));
}

它还支持传参，用法如下：

void main() {
  runApp(Stateful.of(CounterVState(), arguments: {
    'initialCount': 0,
  }));
}

abstract class CounterPState extends BasePagePState<Stateful> {
  int count = 0;

  void add() {
    setState(() {
      count++;
    });
  }

  @override
  void initState() {
    super.initState();
    count = widget.arguments!['initialCount'];
  }
}

可以直接在 initState 中获取到参数。这里切记要为 BasePagePState 加上 Stateful 泛型参数。

计数器示例

最后看看用 PVState 架构模式实现的计数器的完整源码吧：

void main() {
  runApp(Stateful.of(CounterVState(), arguments: {
    'initialCount': 0,
  }));
}

abstract class CounterPState extends BasePagePState<Stateful> {
  late int count;

  void add() {
    setState(() {
      count++;
    });
  }

  @override
  void initState() {
    super.initState();
    count = widget.arguments!['initialCount'];
  }
}

class CounterVState extends CounterPState {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: const Text('Flutter Demo Home Page'),
        ),
        body: ConstraintLayout(
          children: [
            const Text(
              'You have pushed the button this many times:',
            ).applyConstraint(
              centerTo: parent,
            ),
            Text(
              '$count', // Direct access to count
              style: Theme.of(context).textTheme.headline4,
            ).applyConstraint(
              outBottomCenterTo: rId(0),
            ),
            FloatingActionButton(
              onPressed: add, // Widget and logic separation
              child: const Icon(Icons.add),
            ).applyConstraint(
              bottomRightTo: parent.rightMargin(20).bottomMargin(20),
            )
          ],
        ),
      ),
    );
  }
}

结束语

在我的实际使用中，我还为 BaseState 封装了一些其它的能力，比如 showLoading、showToast、sendRequest 等等。你也可以结合实际情况添加一些东西。架构模式的源码已开源到 github.com/hackware199…

我是 hackware，关注我（公众号：FlutterFirst），一起成长！

再谈 PVState 架构模式

PVState 概念介绍

PVState 源码分析

计数器示例

结束语