Flutter 超简单状态管理

Posted 2021-12-28 编程之路从0到1

Flutter 状态管理

目前Flutter已经有许多状态管理的方案，但就我个人而言，并不能完全满足我的要求。我希望状态管理更加简单，而不是成为负担，我希望状态管理更加可靠，而不是使用过于复杂的实现。譬如目前最为简洁的get库，为了实现一些黑科技语法糖，其实现就较为复杂。我们知道一台机器越复杂，可靠性就会降低。道理就如同在一些动乱地区，非常流行一些傻大黑粗的皮卡车，结构简单，皮实耐用。

为了兼具简洁和可靠性，同时摆脱对InheritedWidget的限制，我使用注解和依赖注入库来实现，原理上类似Bloc，但更加简洁，他们都是使用Stream来做状态管理，这是就是EbloX库。

简单示例

首先来看一个大家喜闻乐见的计数器示例：

1. 添加依赖

dependencies:
  eblox:
  eblox_annotation:

dev_dependencies:
  build_runner:
  eblox_generator:

2. 编写我们的ViewModel类来处理业务逻辑

import 'package:eblox/blox.dart';
import 'package:eblox_annotation/blox.dart';
import 'package:flutter/cupertino.dart';

part 'counter_view_model.g.dart';

@bloX
class _CounterVModel extends Blox

  @StateX(name:'CounterState')
  int _counter = 0;

  @ActionX(bind: 'CounterState')
  void _add() async
    _counter ++;
  

  @ActionX(bind: 'CounterState')
  void _sub()
    _counter--;
  

  @override
  void dispose() 
    super.dispose();
    debugPrint('CounterVModel dispose...');
  

首先从Blox继承一个以下划线开头的ViewModel类，该类需要使用@bloX注解修饰 。接下来定义一个UI需要的状态数据_counter，也必须以下划线_开头，然后使用@StateX注解修饰该数据，这样就能自动生成一个State类来包装该数据。@StateX注解可以传name参数生成指定名字的State类，也可以缺省，默认生成规则会去除变量名的下划线，然后首字母大写+State，譬如变量_color，则会生成ColorState类。

接下来，我们需要定义动作，也就是对这个状态的操作。使用@ActionX注解修饰下划线_开头的方法，就是一个动作，它会生成对应的Action类，生成规则与State类似，可以传name指定名称，也可以缺省，如上例，将会生成AddAction类和SubAction类。bind参数用于指定该动作关联的State类名称。

我们定义的两个方法分别用来自增、自减计数变量，但这两个方法不需要我们去调用，而且它们也是私有的。当UI上发出AddAction或SubAction动作时，对应的Action方法会自动调用。

3. 生成代码

在项目根路径下执行flutter pub run build_runner watch --delete-conflicting-outputs命令，会生成counter_view_model.g.dart文件

4. 编写UI

class CounterPage extends StatelessWidget 
  const CounterPage(Key? key) : super(key: key);

  @override
  Widget build(BuildContext context) 
    return Scaffold(
      body: SafeArea(
        child:BloxBuilder<CounterVModel,CounterState>(
            create:()=>CounterVModel(),
            builder: (count) 
              return Center(
                child: Column(
                  mainAxisSize: MainAxisSize.min,
                  children: [
                    Text("$count"),
                    ElevatedButton(
                      onPressed: () 
                        AddAction().to<CounterVModel>();
                      ,
                      child: const Text("+"),
                    ),
                    ElevatedButton(
                      onPressed: () 
                        SubAction().to<CounterVModel>();
                      ,
                      child: const Text("-"),
                    ),
                  ],
                ),
              );
            ),
      ),
    );
  

在UI上，可以使用BloxBuilder组件来获取状态，它需要指定两个泛型，第一个是我们的ViewModel类CounterVModel，第二个是我们的状态类CounterState，接下来实现create回调，可在此处实例化CounterVModel。如果你不喜欢用create实例化，也可以调用I.put(CounterVModel())方法在其他任意地方实例化。builder回调用于返回Widget，它的参数就是State。

当我们需要发起动作时，直接实例化相应的动作，并调用to方法传入泛型，发起动作，触发计数器的状态改变。当状态改变时，UI能自动感知，也发生对应变化。

可以看到使用Eblox库的整体流程非常简单，开发者只需要定义状态和动作，然后在界面上发起动作即可。完整示例工程，请查看 这里。

原理说明

状态管理不是必须品，使用状态管理框架的原因是希望开发更加简单，同时将业务逻辑与UI创建分离，使得项目可以长期维护下去，而不会把代码变成一座屎山。

代码之所以会变成屎山，大部分原因就是职责不明，代码相互耦合。我们以上述的计数器为例，如果在按钮的onPressed中可以直接调用_add()方法修改计数器，这就耦合了。一旦后续_add方法内部发生修改，就会影响外部所有调用该方法的地方。onPressed调用_add也是一种不明确的行为，这种调用意味着什么呢？对于后续接手代码维护的人而言，代码中大量的这种不明确行为是让人崩溃的。

基于这些原因，我们需要状态管理框架，提升代码的可维护性。

现在，我们将业务逻辑写到Blox层，UI与业务逻辑之间的联系，由State和Action两个概念维系。这样就实现了业务逻辑与UI的分离。UI主要是接受用户的操作的，这些操作就是一个个动作，而UI的创建则需要状态，不同的状态决定了不同的UI，UI界面的变化，其实就是状态的变化。这样，我们只需要修改状态即可，UI就能自动感知，从而发生变化。

大多时候，数据可能来自于服务器，所以我们需要在Blox之下增加一层Service，由Service来封装与服务器的交互逻辑，Service隔离了具体的数据源，对于ViewModel而言，Service就是数据源。

常见案例

计数器例子过于简单，我们来看一个更加常见的案例：

这是一个模拟歌曲搜索的界面，基于上述的State和Action概念来分析，我们首先需要明确State和Action。很明显，点击搜索按钮搜索就是一个动作，而搜索结果就是一个状态。

不同的状态，对应不同的UI界面，结果为空时，UI显示Empty标签，有结果时，就显示结果项。

我们来看Eblox如何实现：

1. 定义状态和动作

part 'search_view_model.g.dart';

@bloX
class _SearchVModel extends Blox

  @AsyncX(name: 'SongListState')
  SongListModel _songModel = SongListModel();

  @bindAsync
  @ActionX(bind: 'SongListState')
  BloxAsyncTask<SongListModel> _search(String name)
    return ()
      return  SearchService.search(name);
    ;
  

注意，可以使用@AsyncX注解来修饰异步状态。这里因为我们模拟数据是耗时加载的，因此需要异步加载。还有一点要注意，这里的_search方法声明了参数。被@ActionX注解的方法是可以声明参数的，不仅可以声明参数，还可以声明位置参数或命名参数（花括号中声明参数），此处是声明的位置参数。这些参数会自动包含到动作中，从而在发起动作时传参。

定义动作时，这里增加了一个注解@bindAsync，用于修饰与异步状态关联的动作。需注意，@bindAsync修饰的方法，返回值必须是BloxAsyncTask<T>类型，这里泛型T是我们需要的异步状态的类型。它的原型其实是typedef BloxAsyncTask<T> = Future<T> Function();

接下来，就可以在_search方法中编写加载数据的逻辑。前文已经说过，增加一个Service层封装数据源，这里直接调用Service提供的搜索接口搜索歌曲，但要注意返回值必须是一个Future<T> Function()的方法类型，这里闭包包装一下即可。

2. 解析注解，生成代码
这里，可以使用flutter pub run build_runner build命令手动生成，但每次新增或修改Blox里的代码时都要手敲一遍，因此推荐使用flutter pub run build_runner watch --delete-conflicting-outputs命令，它可以开启监控，每次修改Blox代码时都会自动重新生成。

3. 编写UI

class SearchPage extends StatelessWidget 
  SearchPage(Key? key) : super(key: key);

  final TextEditingController _controller = TextEditingController();

  @override
  Widget build(BuildContext context) 
    return Scaffold(
      appBar: AppBar(title: const Text('Song search'),),
      body: SafeArea(
        child: Column(
          children: [
            TextField(
              controller: _controller,
              decoration: InputDecoration(
                contentPadding: const EdgeInsets.symmetric(horizontal: 16),
                  suffix: IconButton(
                icon: const Icon(Icons.search_rounded),
                onPressed: ()
                  if(_controller.text.isNotEmpty) 
                    SearchAction(_controller.text).to<SearchVModel>();
                  
                ,
              )),
            ),
            Flexible(
                child: BloxView<SearchVModel, SongListState<SongListModel>>(
              create: () => SearchVModel(),
              onLoading: () => const Center(child: CircularProgressIndicator()),
              onEmpty: ()=> const Center(child: Text("Empty")),
              builder: (state) 
                return ListView.builder(
                    itemCount: state.data.songs.length,
                    itemBuilder: (ctx, i) 
                      return Container(
                        alignment: Alignment.center,
                        height: 40,
                        child: Text(state.data.songs[i],style: const TextStyle(color: Colors.blueGrey,fontSize: 20),),
                      );
                    );
              ,
            )),
          ],
        ),
      ),
    );
  

这里界面比较简单，上下结构，上面一个输入框，下面是列表部分。当用户点击搜索按钮时，发起SearchAction动作。注意，这里实例化SearchAction类的参数就对应_search方法中的参数。

对于异步状态，可以使用BloxView来获取。它提供了onLoading, onEmpty, onError,builder等回调来处理数据加载过程中的状态。开始加载时，回调onLoading，我们可以在此创建相应的加载动画，加载完成后，成功获取数据，回调builder来构建界面，如果没有数据回调onEmpty创建相应页面，加载报错，回调onError。

这里需要小心，如果状态中包装的是自定义的数据类型，如此处的SongListModel，你仍然希望onEmpty起作用，那么该数据类需要混入BloxData并实现isEmpty方法：

class SongListModel with BloxData

  SongListModel(UnmodifiableListView<String>? songs)
    if(songs !=null) this.songs = songs;
  

  UnmodifiableListView<String> songs = UnmodifiableListView([]);

  @override
  bool get isEmpty => songs.isEmpty;

用EbloX实现此案例，代码仍然十分简洁清晰。完整代码，请查看这里

其他

使用Eblox实现业务逻辑与UI的分离后，代码测试变得更加简单方便，以一个简单的单元测试为例：

void main()
  const len = 10;
  group('Counter test', () 
    setUp(() 
      I.put(CounterVModel());
    );

    tearDown(() 
      I.delete<CounterVModel>();
    );

    test('test add counter', () 
      for(var i = 0;i<len;i++)
        AddAction().to<CounterVModel>();
      
      expect(Future(() => $<CounterVModel>().counter.data), completion(len));
    );

    test('test sub counter', () 
      for(var i = 0;i<len;i++)
        SubAction().to<CounterVModel>();
      
      expect(Future(() => $<CounterVModel>().counter.data), completion(-10));
    );
  );

另外，如果UI上需要多个状态，那么可以使用MultiBuilder来处理。BloxBuilder和BloxView仅能处理单个状态。

目前Eblox处于0.0.2版本，仅测试了一些有限范围的使用，后续有时间会完善更多功能，欢迎大家测试BUG，不胜感激！

---

关注公众号：编程之路从0到1

了解更多技术干货