最近，很多开发者都在学习Flutter开发跨端应用程序。由于Flutter目前尚未成熟，大家在开发的过程中肯定会遇到很多问题。本文重点介绍了一个MobX库，用来解决Flutter状态管理的技术痛点。

我开始用Flutter后，大多数项目都是在Flutter中编写的。终于有一天我遇到了setState()这座大山，想逃都逃不掉。它会同时处理很多类，带着一大堆动态数据，让代码变得丑陋不堪，写起来也像蜗牛一样慢；而且它会严重拖累应用程序的性能，因为你得不停从头至尾重建小部件树，哪怕变量值稍微改变一下也得折腾一次。

什么是状态管理

先看看这个：https://flutter.dev/docs/development/data-and-backend/state-mgmt/simple。记住新项目中用的Flutter样板代码，看下它要改变代码中的变量值时是如何设置setState的；

int m = 2; 
setState(() { 
  m = 5; 
 });

print(m); //输出 : 5

Dart中的SetState

什么是MobX

MobX是一个广受好评的库，它融入函数响应式编程（TFRP）原则简化了状态管理，使其容易扩展。地址：https://mobx.pub/

测试MobX Flutter：

使用MobX的Crypto应用

因此我决定构建一个示例应用程序，告诉大家使用MobX构建应用有多容易。项目地址：https://github.com/Zfinix/crypto_mobx。

项目结构：

项目结构

打理项目结构是非常重要的，我创建项目时会精心做好这项工作；虽说它可能会随着项目发展而出现变化，但良好的结构会让代码更容易重构，更快找出错误，且更容易理解。注意：.g.dart是build_runner包自动生成的代码，Flutter新手就不要动它了。

设置依赖关系

dependencies:
  flutter:
    sdk: flutter
  # 下面将Cupertino Icons字体添加到你的应用。
  # 使用CupertinoIcons类用于iOS样式图标。
  cupertino_icons: ^0.1.2
  http: any
  mobx: 0.2.1+1
  flutter_mobx: ^0.2.0
  mobx_codegen: ^0.2.0
  flutter_svg: 0.13.0

dev_dependencies:
  build_runner:

pubspec.yaml

这里flutter_mobx是主要的插件，mobx_codegen和build_runner用于代码生成。剧透：MobX支持代码生成。

下面是我现在的Dart版本：

environment:
  sdk: ">=2.1.0 <3.0.0"

自定义间距小部件：

import 'package:flutter/material.dart';

Widget cYM(double y) {
  return SizedBox(
    height: y,
  );
}

你可能会注意到对方法cYM()和cXM()的引用。学习Flutter时，我需要一种方法来轻松地为移动应用添加间距。我知道有一个Spacer()小部件可以处理，但它对我来说还不够灵活，而且比较费时间。所以我创建了cYM（Custom Y Margin，用来添加垂直间距）和cXM（Custom X Margin，用来添加水平间距）。

设置API和Model类

我们将使用Nomics Cryptocurrency & Bitcoin API：http://docs.nomics.com/

这里我们为GET:/currency/ticker端点提供了示例JSON响应。我们还使用在线工具从给定的JSON生成一个Model类。另外还有一个来自Flutter的json_serializer库。

工具：https://javiercbk.github.io/json_to_dart/

通常JSON TO Dart工具能正常工作，但在使用JSON数组时有个技巧。这里要用新的对象包装它；

把下面的代码：

[
  {
    "currency": "BTC",
    "id": "BTC",
    "price": "8451.36516421",
    "price_date": "2019-06-14",
    "symbol": "BTC",
    "circulating_supply": "17758462",
    "max_supply": "21000000",
    "name": "Bitcoin",
    "logo_url": "https://s3.us-east-2.amazonaws.com/nomics-api/static/images/currencies/btc.svg",
    "market_cap": "150083247116.70",
    "rank": "1",
    "high": "19404.81116899",
    "high_timestamp": "2017-12-16",
    "1d": {
      "price_change": "269.75208019",
      "price_change_pct": "0.03297053",
      "volume": "1110989572.04",
      "volume_change": "-24130098.49",
      "volume_change_pct": "-0.02",
      "market_cap_change": "4805518049.63",
      "market_cap_change_pct": "0.03 "
    }
  }
]

改成：

{
  “data”: [
  {
    "currency": "BTC",
    "id": "BTC",
    "price": "8451.36516421",
    "price_date": "2019-06-14",
    "symbol": "BTC",
    "circulating_supply": "17758462",
    "max_supply": "21000000",
    "name": "Bitcoin",
    "logo_url": "https://s3.us-east-2.amazonaws.com/nomics-api/static/images/currencies/btc.svg",
    "market_cap": "150083247116.70",
    "rank": "1",
    "high": "19404.81116899",
    "high_timestamp": "2017-12-16",
    "1d": {
      "price_change": "269.75208019",
      "price_change_pct": "0.03297053",
      "volume": "1110989572.04",
      "volume_change": "-24130098.49",
      "volume_change_pct": "-0.02",
      "market_cap_change": "4805518049.63",
      "market_cap_change_pct": "0.03 "
    }
  }
 ]
}

出现问题是正常的，这个工具还没有解析JSON。看看我自己的Model类：

class CryptoModel {
  List<CryptoData> data;

  CryptoModel({this.data});

  CryptoModel.fromJson(Map<String, dynamic> json) {
    if (json['data'] != null) {
      data = new List<CryptoData>();
      json['data'].forEach((v) {
        data.add(new CryptoData.fromJson(v));
      });
    }
  }

  Map<String, dynamic> toJson() {
    final Map<String, dynamic> data = new Map<String, dynamic>();
    if (this.data != null) {
      data['data'] = this.data.map((v) => v.toJson()).toList();
    }
    return data;
  }
}

class CryptoData {
  String currency;
  String id;
  String price;
  String priceDate;
  String symbol;
  String circulatingSupply;
  String maxSupply;
  String name;
  String logoUrl;
  String marketCap;
  String rank;
  String high;
  String highTimestamp;
  Md md;

  CryptoData(
      {this.currency,
      this.id,
      this.price,
      this.priceDate,
      this.symbol,
      this.circulatingSupply,
      this.maxSupply,
      this.name,
      this.logoUrl,
      this.marketCap,
      this.rank,
      this.high,
      this.highTimestamp,
      this.md});

  CryptoData.fromJson(Map<String, dynamic> json) {
    currency = json['currency'];
    id = json['id'];
    price = json['price'];
    priceDate = json['price_date'];
    symbol = json['symbol'];
    circulatingSupply = json['circulating_supply'];
    maxSupply = json['max_supply'];
    name = json['name'];
    logoUrl = json['logo_url'];
    marketCap = json['market_cap'];
    rank = json['rank'];
    high = json['high'];
    highTimestamp = json['high_timestamp'];
    md = json['1d'] != null ? new Md.fromJson(json['1d']) : null;
  }

  Map<String, dynamic> toJson() {
    final Map<String, dynamic> data = new Map<String, dynamic>();
    data['currency'] = this.currency;
    data['id'] = this.id;
    data['price'] = this.price;
    data['price_date'] = this.priceDate;
    data['symbol'] = this.symbol;
    data['circulating_supply'] = this.circulatingSupply;
    data['max_supply'] = this.maxSupply;
    data['name'] = this.name;
    data['logo_url'] = this.logoUrl;
    data['market_cap'] = this.marketCap;
    data['rank'] = this.rank;
    data['high'] = this.high;
    data['high_timestamp'] = this.highTimestamp;
    if (this.md != null) {
      data['1d'] = this.md.toJson();
    }
    return data;
  }
}

class Md {
  String priceChange;
  String priceChangePct;
  String volume;
  String volumeChange;
  String volumeChangePct;
  String marketCapChange;
  String marketCapChangePct;

  Md(
      {this.priceChange,
      this.priceChangePct,
      this.volume,
      this.volumeChange,
      this.volumeChangePct,
      this.marketCapChange,
      this.marketCapChangePct});

  Md.fromJson(Map<String, dynamic> json) {
    priceChange = json['price_change'];
    priceChangePct = json['price_change_pct'];
    volume = json['volume'];
    volumeChange = json['volume_change'];
    volumeChangePct = json['volume_change_pct'];
    marketCapChange = json['market_cap_change'];
    marketCapChangePct = json['market_cap_change_pct'];
  }

  Map<String, dynamic> toJson() {
    final Map<String, dynamic> data = new Map<String, dynamic>();
    data['price_change'] = this.priceChange;
    data['price_change_pct'] = this.priceChangePct;
    data['volume'] = this.volume;
    data['volume_change'] = this.volumeChange;
    data['volume_change_pct'] = this.volumeChangePct;
    data['market_cap_change'] = this.marketCapChange;
    data['market_cap_change_pct'] = this.marketCapChangePct;
    return data;
  }
}

构建Controller类

接下来就是创造奇迹的时刻：你会创建一个新类。

根据MobX的文档：我可以按文档说明创建一个Controller，而mobx_codegen将用它来生成_$CryptoController类。

这里part 'homeController.g.dart;负责指定将由build_runner创建的类。

而part和part of最近更多用于代码生成场景（不再用作已弃用的转换器了）

import 'package:crypto_mobx/models/cryptoModel.dart';
import 'package:mobx/mobx.dart';

part 'homeController.g.dart';

class CryptoController = CryptoControllerBase with _$CryptoController;

abstract class CryptoControllerBase with Store {
  @observable
  List<CryptoData> cryptoData;

  @action
  void changeCryptoData(List<CryptoData> value) => cryptoData = value;

}

查看MobX Flutter文档：https://pub.dev/packages/mobx

Build Runner：

运行build runner的命令如下：

Ogbondas-MacBook-Pro:crypto_mobx zfinix$ flutter packages pub run build_runner build -v

构建API请求处理程序

import 'dart:convert';
import 'package:crypto_mobx/models/cryptoModel.dart';
import 'package:http/http.dart' as http;

class Api {
  static final String API_URL = 'https://api.nomics.com/v1';

  static final String API_KEY = 'YOUR_API_KEY';

  static final String GET_CURRENCIES = '$API_URL/currencies/ticker';

  static Future<CryptoModel> getData(context) async {
    try {
      //POST REQUEST BUILD

      final response = await http.get('$GET_CURRENCIES?key=$API_KEY'
          '&ids=BTC,ETH,ETC,MTC,LTC,ICO,ETC,XRP'
          '&interval=1d,30d&convert=USD');
      print(response.body);

      if (response.statusCode == 200) {
        //  saveItem(item: '${response.body}', key: 'message');
        return CryptoModel.fromJson(json.decode('{"data":${response.body}}'));
      } else {
        return null;
      }
    } catch (e) {
      // 发出请求，服务器返回状态代码
      // 代码超过2xx 也不是304
      //if (e.response.body != null) {

      print(e.toString());
    }

    return null;
  }
}

我就喜欢这样做：创建一个返回数据Model的自定义类

return CryptoModel.fromJson(json.decode('{"data":${response.body}}'));

记住前面的小技巧：看看我是怎样将响应包装在JSON对象中的。

构建主页

class _MyHomePageState extends State<MyHomePage> {
  final _controller = CryptoController();

  @override
  void initState() {
    _loadData();
    super.initState();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Color.fromRGBO(245, 240, 240, 1),
      appBar: AppBar(
        brightness: Brightness.light,
        backgroundColor: Colors.white,
        elevation: 1,
        title: Text(
          'Crypto',
          style: TextStyle(color: Colors.black),
        ),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[_buildCard(), _buildList()],
        ),
      ),
    );
  }

我首先构建的是UI，它由两大部分组成：一张卡片和下面的列表。

另外注意要实例化mobx controller：

final _controller = CryptoController();

导入MobX状态Controller类

卡片

  _buildCard() => Flexible(
        flex: 1,
        child: Container(
          width: MediaQuery.of(context).size.width,
          margin: const EdgeInsets.all(18.0),
          decoration: BoxDecoration(
            borderRadius: new BorderRadius.all(const Radius.circular(7.0)),
            gradient: LinearGradient(
              begin: Alignment.topRight,
              end: Alignment.bottomLeft,
              stops: [0.1, 0.5, 0.7, 0.9],
              colors: [
                Colors.pink[300],
                Colors.pink[400],
                Colors.red[300],
                Colors.red[400],
              ],
            ),
          ),
          child: Column(
            crossAxisAlignment: CrossAxisAlignment.center,
            mainAxisAlignment: MainAxisAlignment.center,
            children: <Widget>[
              Text(
                'Total Value',
                style: TextStyle(color: Colors.white),
              ),
              cYM(8),
              Text(
                '\$580.00',
                style: TextStyle(
                    color: Colors.white,
                    fontWeight: FontWeight.w500,
                    fontSize: 35),
              ),
            ],
          ),
        ),
      );

带有渐变背景的简单卡片

ListView

  _buildList() => Flexible(
        flex: 2,
        child: Observer(
          builder: (_) => ListView.builder(
            itemCount: _controller?.cryptoData?.length ?? 0,
            itemBuilder: (BuildContext context, int i) {
              return CryptoCard(cryptoData: _controller?.cryptoData[i]);
            },
          ),
        ),
      );

为了安全起见，我们一定要设置默认值或回退值，尤其是对动态数据更是如此：所以你会注意到_controller?.cryptoData?.length ?? 0，我这里正在检查空值，如果有空值就应该返回数组的长度。这些都借助了??运算符，如果值不为空就返回值本身，否则返回默认值。

Observer小部件：

这个实现是全文重点。它的工作机制是：Observer小部件不是从上到下重建小部件树，而只重建它包装的小部件。在这种情况下唯一需要观察的值就是_controller.cryptoData。

再见了SetState：

我们需要做的就是

  _loadData() async {
    var load = await Api.getData(context);
    if (load != null) _controller.changeCryptoData(load.data);
  }
}

最后是CryptoCard小部件：

class CryptoCard extends StatelessWidget {
  final CryptoData cryptoData;
  const CryptoCard({
    Key key,
    @required this.cryptoData,
  }) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Dismissible(
      onDismissed: (DismissDirection direction) {},
      child: Container(
        decoration: BoxDecoration(
          borderRadius: new BorderRadius.all(const Radius.circular(10)),
          color: Colors.white,
        ),
        margin: const EdgeInsets.symmetric(horizontal: 18, vertical: 9),
        child: ListTile(
          contentPadding: EdgeInsets.all(10.0),
          leading: buildImage(),
          title: Row(
            mainAxisAlignment: MainAxisAlignment.spaceEvenly,
            children: <Widget>[
              Flexible(
                child: Column(
                  crossAxisAlignment: CrossAxisAlignment.start,
                  children: <Widget>[
                    Text(cryptoData?.name ?? '',
                        overflow: TextOverflow.clip,
                        style: TextStyle(
                            fontSize: 14, fontWeight: FontWeight.bold)),
                    cYM(8),
                    Text(
                      cryptoData?.symbol ?? '',
                      style: TextStyle(
                          fontWeight: FontWeight.w500,
                          color: Colors.grey,
                          fontSize: 11),
                    ),
                  ],
                ),
              ),
              cXM(8),
              Flexible(
                child: Column(
                  crossAxisAlignment: CrossAxisAlignment.end,
                  children: <Widget>[
                    Text(
                        '\$${double.parse(cryptoData.price).toStringAsFixed(2)}',
                        overflow: TextOverflow.clip,
                        style: TextStyle(
                            fontSize: 14, fontWeight: FontWeight.bold)),
                    cYM(8),
                    Text(
                      'Rank: ${cryptoData?.rank ?? 'NaN'}',
                      style: TextStyle(
                          fontWeight: FontWeight.w500,
                          color: Colors.grey,
                          fontSize: 11),
                    ),
                  ],
                ),
              ),
              Container(),
            ],
          ),
          trailing: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            crossAxisAlignment: CrossAxisAlignment.end,
            children: <Widget>[
              Text(
                  '\$${double?.parse(cryptoData?.md?.priceChange ?? '0.00').toStringAsFixed(2) ?? 0.00}',
                  overflow: TextOverflow.clip,
                  style: TextStyle(
                      fontSize: 14,
                      color: Colors.black,
                      fontWeight: FontWeight.bold)),
              cYM(8),
              Text(
                '${double.parse(cryptoData.high).toStringAsFixed(2)}',
                style: TextStyle(
                    fontWeight: FontWeight.w500,
                    color: Colors.red,
                    fontSize: 11),
              ),
            ],
          ),
        ),
      ),
      key: Key(cryptoData.id),
    );
  }

  buildImage() => Card(
        child: cryptoData.logoUrl != null && cryptoData.logoUrl.contains('svg')
            ? CircleAvatar(
                maxRadius: 21.0,
                child: SvgPicture.network(cryptoData.logoUrl ?? ''),
                backgroundColor: Colors.white,
              )
            : CircleAvatar(
                maxRadius: 21.0,
                backgroundImage: NetworkImage(cryptoData?.logoUrl ??
                    'https://i.pinimg.com/originals/1f/7d/ec/1f7dec824ddfabb03b890b08d6c3e548.png'),
                backgroundColor: Colors.white,
              ),
        elevation: 3.0,
        shape: CircleBorder(),
        clipBehavior: Clip.antiAlias,
      );
}

请注意它所包装的Dismissible小部件，它需要的只是一个唯一的Key，我将其设置为API返回的特定ListItem的ID。而且图像是随机的，所以我必须检查它是svg还是png/jpg，这里使用三元运算符（condition ? return : else return）返回对应的SvgPicture.network()或NetworkImage()Widget。

另外.toStringAsFixed()方法可以将double舍入到指定的小数位。

最后我想补充一点：MobX的状态管理很棒，感谢阅读…

英文原文：https://medium.com/future-vision/reactive-programming-in-flutter-state-management-with-mobx-a3a2ae1e8d1e

创作场景

再见，Flutter 自带状态管理！你好，MobX 库