从0开始设计Flutter独立APP | 第一篇: 数据库与状态管理

鉴于Flutter高性能渲染和跨平台的优点，闪点清单在移动端APP上，使用了完整的Flutter框架来开发。既然是完整APP，架构搭建彻底不受历史Native APP的影响，没有历史包袱的沉淀，设计也能更灵活和健壮。

首先列举部分闪点清单的业务特性（较为通用的业务特性）：

1. 本地有较大数据量的清单数据，离线可用，未登陆可用；登陆后须要服务器数据同步
2. 状态变动场景多，前端状态逻辑较为复杂，跨页面、跨组件状态更新频繁

这几个业务点，设计到的技术选型有：本地数据库、前端状态管理，对不少业务来讲，这几点都是比较核心的东西，也是咱们今天重点要讲的内容。

数据库选型

数据库选型，首先要定的，就是选择数据库类型：关系型数据库、非关系型数据库仍是Key/Value存储。

对于关系型数据库，可选的有好比：SQLite、Core Data、GreenDao等；对于非关系型数据库，可选有Realm、UnQLite等；对于Key/Value存储，有好比Redis、Berkeley DB、Level DB等。

因为业务形态具备复杂的查询场景，因此首先排除了Key/Value存储；而后鉴于业务迭代频繁，数据结构变更较大，因此彻底的关系型数据库使用成本会较高，版本更新时在数据兼容和数据清洗方面要作较多的工做；因此咱们采用了NoSQL数据库，或者支持JSON类型的关系型数据库。

Flutter目前在NoSQL上的可选项并很少，Realm、UnQLite等均未支持（固然能够经过Flutter FFI来封装给Dart用，但成本太高）；Flutter的sqflite插件能够较好地支持SQLite，但因为SQLite在3.9之后才支持JSON数据，考虑到Android版本（Android各版本使用的SQLite版本文档）兼容问题，咱们并无采用sqflite；咱们最终采用的数据库是Sembast，一个还比较小众，但性能和API建设都还不错的NoSQL数据库。

Sembast介绍

Sembast API很简洁，但能支持较复杂的数据库操做。 在数据查询上，可以经过简单的逻辑API，经过聚合构造出复杂的逻辑查询语句；数据排序实现也比较完整，支持多字段排序（但不支持bool类型排序）；对事务操做也有支持；支持整型自增key。

Sembast部分API预览

var store = intMapStoreFactory.store('animals');

// 事务处理
await db.transaction((txn) async {
  await store.add(txn, {'name': 'fish'});
  await store.add(txn, {'name': 'cat'});
  await store.add(txn, {'name': 'dog'});
});

// 数据查询
var finder = Finder(
    filter: Filter.greaterThan('name', 'cat'),
    sortOrders: [SortOrder('name')]);
var records = await store.find(db, finder: finder);

expect(records.length, 2);
expect(records[0]['name'], 'dog');
expect(records[1]['name'], 'fish');
复制代码

但因为对小众数据库前途的担心考虑，咱们设计了便于迁移的数据架构，对数据操做层作了一层抽象，后期若是迁移数据库，业务层能够彻底不须要改动。

状态管理选型

状态管理，在现在的前端技术中，是很是重要的一环，好的状态管理框架，可让业务更好得解耦、简化组件数据通信成本、大幅提高开发体验。咱们在状态管理选型上花了较多的时间来对比各类方案，好比：provider、bloc、redux、scoped_model、mobx、甚至业界网红团队的fish-redux。咱们最终采用的是mobx，关于各个方案的对比，一篇文章讲不完，咱们最终选择mobx，更可能是由于它的API更友好。

Mobx采用注解的方式来定义状态，并封装了一个Widget用于Widget的数据更新，学习、使用成本较低。

注解定义

Mobx的注解使用方式，与Web中的Vue很是相似如:

1. 使用@observable来注解一个属性，表示其须要被监听，Mobx会自动为其添加getter和setter
2. 使用@computed来注解一个计算属性
3. 使用@action来注解一个修改store的方法，相似于Vuex里的mutations

示例代码：

import 'package:mobx/mobx.dart';

part 'counter.g.dart';

class Counter = CounterBase with _$Counter; abstract class CounterBase with Store {
  @observable
  int value = 0;

  @computed
  int get allowCount {
    return value*2;
  }

  @action
  void increment() {
    value++;
  }
}
复制代码

使用Mobx必须的一个步骤，就是前置编译步骤。咱们编写Mobx的状态脚本，须要在前置编译环节，编译成dart可读的脚本，为此咱们须要执行flutter pub run build_runner build生成.g.dart为后缀的文件（其实就是将注解转义为getter和setter）。 UI更新方式

UI更新方式

须要使用Mobx的Widget，使用Observer包装一层，这样其就能够相应Mobx的状态变化，如:

Observer(
  builder: (context) => Text('昵称: ${userStore.user.username}'),
)
复制代码

前置编译脚本

Dart在编译时和运行时均没法支持注解，因此Mobx使用了前置编译脚本解析注解动态生成Dart代码的方式（Dart官方支持）。Mobx注解方式使用前，须要为项目添加build_runner和mobx_codegen依赖。build_runner为Dart官方提供，用于在构建项目以前执行特定任务，任务配置于依赖库的build.yaml脚本中; mobx_codegen依赖于该build_runner将注解生成可执行的Dart代码（如添加getter和setter方法）。

结尾

状态管理和数据库，是前端项目基础框架的重要环节，设计好了能够很好地提高开发体验和效率，下降后续开发维护成本。

讲到这里，还并无完成基础框架的搭建，后面咱们会讲解更多的Flutter架构设计内容，好比：国际化、通知、分享、UI设计等等。

---

持续分享闪点清单在Flutter上的开发经验，闪点清单移动端APP体验：

硬广，很硬

闪点清单PC端APP: 业界惟一一款悬浮清单软件

闪点清单移动端APP：