前言
我们在很流行的状态管理库 MobX 是怎么回事？介绍了 MobX 的基本概念和简单的计数器示例。本篇我们引入一个非常酷炫的图表插件库来讲解 MobX 网络请求后渲染曲线。
MobX 驱动 UI
MobX 驱动 UI 时非常简单，使用 flutter_mobx 插件后，简化到只需要使用 Observer 的 builder 属性包裹依赖状态数据的子组件即可。只要子组件中有依赖状态数据，在状态发生改变后就会自动刷新。可以说，MobX 大大简化了状态管理的使用，使得我们可以专注于业务代码，而无需关心状态和 UI 界面之间的联系。
Observer(
builder: (_) => Text(
'${_counter.value}',
style: const TextStyle(fontSize: 20),
),
),
因此，MobX 本身太简洁了(👍🏻)！并没有什么太多可以介绍的，但是如果说要实现更复杂的状态管理的话，还需要有别的方式，这个留在我们下一篇来介绍。
图表插件库 fl_chart
pub 上提供了不少图标插件库，其中 fl_chart 是最为流行的之一，我们来看看官方的示例，在手机上能够实现这样的效果已经十分酷炫了！示例工程中提供了所有已经支持的图表的示例，我们只需要按照示例进行修改就可以绘制我们自己的图表。
UI 构建
我们以曲线图为例，通过后端数据绘制一条曲线。先来构建曲线 UI。
class LineChartDemo extends StatelessWidget {
LineChartDemo({Key? key}) : super(key: key);
final ChartStore store = ChartStore();
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(title: Text('曲线')),
body: Observer(
builder: (context) => LineChart(
sampleData1(store.lineYData),
swapAnimationDuration: const Duration(milliseconds: 250),
),
),
floatingActionButton: FloatingActionButton(
onPressed: () {
store.featchLineData();
},
child: Icon(Icons.refresh, color: Colors.white),
),
);
}
//...
}
曲线绘制的关键代码是以状态数据lineYData（Y 轴数据）作为曲线的源数据，从而使得状态数据更新后可以自动渲染曲线。下面简要介绍一下曲线图的组成：
LineChartData sampleData1(List<double> yData) => LineChartData(
lineTouchData: lineTouchData1,
gridData: gridData,
titlesData: titlesData1,
borderData: borderData,
lineBarsData: lineBarsData1(yData),
minX: 0,
maxX: 15,
maxY: yData
.reduce((value, element) => value < element ? element : value)
.toDouble() +
1.0,
minY: yData
.reduce((value, element) => value > element ? element : value)
.toDouble() -
1.0,
);
LineChartData是曲线图数据类，包括了如下部分：
-
lineTouchData：数据触点配置数据，即触摸到数据点后如何显示； -
gridData：网格数据； -
titlesData：上下左右四个方位的标题栏（坐标轴栏）数据，可以根据自己需要配置坐标轴显示以及标题； -
borderData：边框数据，及是否要显示边框，以及如何显示边框； -
lineBarsData：数据点数组，可以在同一个图表中显示多条曲线。 -
minX，maxX，minY和MaxY：即 X 轴和 Y 轴的最大最小值范围，可以根据需要设置范围，比如本篇X 轴0-15，而 Y 轴则是根据返回值设置最大最小值，以保证曲线显示在屏幕范围内。
再来看一下曲线数据点代码，这里我们对各个属性都加了注释了，就无需再介绍了，实际可以根据需要返回多条曲线和设置曲线的样式。
List<LineChartBarData> lineBarsData1(List<double> yData) {
double x = 1;
return [
LineChartBarData(
//曲线还是折线
isCurved: true,
//线条颜色
colors: [const Color(0xff4a99fa)],
//线粗细
barWidth: 2,
//是否圆形笔头
isStrokeCapRound: true,
//是否显示点数据
dotData: FlDotData(show: true),
//图形覆盖区域是否显示
belowBarData: BarAreaData(show: true),
//坐标（x,y） 点集合
spots: yData.map((value) {
FlSpot spot = FlSpot(x, value.toDouble());
x += 2;
return spot;
}).toList(),
),
];
}
其他代码基本上是从官方的样例复制过来修改的，可以参考官网示例或本例的源代码：MobX状态管理代码（运行时请同时运行后端代码：配套后端代码（基于 ExpressJs））。
状态管理代码
有了上一篇利用 VSCode 的代码模板提高 MobX 的编码效率介绍的代码模板神器，编写状态代码相当轻松。只需要修改状态对象类型、名称、初始值，然后实现获取后端数据的 action 即可。代码如下：
import 'package:mobx/mobx.dart';
import 'chart_service.dart';
part 'chart_store.g.dart';
class ChartStore = ChartStoreBase with _$ChartStore;
abstract class ChartStoreBase with Store {
@observable
List<double> lineYData = [0, 0, 0, 0, 0, 0, 0];
@action
Future<void> featchLineData() async {
var response = await ChartService.getLines();
if (response?.statusCode == 200) {
lineYData =
List<double>.from(response.data.map((e) => e.toDouble()).toList());
}
}
}
实际上自己写的状态代码才4行而已！
运行效果
运行效果如下，实际开发过程中可以根据项目需要更改曲线样式。
总结
从本篇我们更加能够体会 MobX 的简洁之处，真正地做到了状态和 UI 分离以及无感知刷新。通过MobX 的代码生成器和模板代码可以大大减少我们的编码量，提高效率。本篇我们还引入了 fl_chart 这个效果酷炫的图表插件，这个插件基本上能够满足我们基本的线条图、柱状图、散点图和饼图的图表需要。
