Flutter 入门与实战(六十八):MobX 获取网络数据来渲染酷炫的曲线

2,148 阅读2分钟

这是我参与8月更文挑战的第31天,活动详情查看:8月更文挑战

前言

我们在Flutter 入门与实战(六十六):听说 MobX 很流行,进来了解一下?介绍了 MobX 的基本概念和简单的计数器示例。本篇我们引入一个非常酷炫的图表插件库来讲解 MobX 网络请求后渲染曲线。

MobX 驱动 UI

MobX 驱动 UI 时非常简单,使用 flutter_mobx 插件后,简化到只需要使用 Observerbuilder 属性包裹依赖状态数据的子组件即可。只要子组件中有依赖状态数据,在状态发生改变后就会自动刷新。可以说,MobX 大大简化了状态管理的使用,使得我们可以专注于业务代码,而无需关心状态和 UI 界面之间的联系。

Observer(
  builder: (_) => Text(
    '${_counter.value}',
    style: const TextStyle(fontSize: 20),
  ),
),

因此,MobX 本身太简洁了(👍🏻)!并没有什么太多可以介绍的,但是如果说要实现更复杂的状态管理的话,还需要有别的方式,这个留在我们下一篇来介绍。

图表插件库 fl_chart

pub 上提供了不少图标插件库,其中 fl_chart 是最为流行的之一,我们来看看官方的示例,在手机上能够实现这样的效果已经十分酷炫了!示例工程中提供了所有已经支持的图表的示例,我们只需要按照示例进行修改就可以绘制我们自己的图表。 scatter_chart_sample_1.gif bar_chart_sample_2.gif pie_chart_sample_2.gif

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:数据点数组,可以在同一个图表中显示多条曲线。
  • minXmaxXminYMaxY:即 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))。

状态管理代码

有了上一篇Flutter 入门与实战(六十七):教你一个让编码速度飞起的方法!介绍的代码模板神器,编写状态代码相当轻松。只需要修改状态对象类型、名称、初始值,然后实现获取后端数据的 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 这个效果酷炫的图表插件,这个插件基本上能够满足我们基本的线条图、柱状图、散点图和饼图的图表需要。

目前对于使用MobX还需要解决2个问题,那就是是否支持嵌套和多组件共享,我们接下来将介绍这部分内容。


我是岛上码农,微信公众号同名,这是Flutter 入门与实战的专栏文章,对应源码请看这里:Flutter 入门与实战专栏源码

👍🏻:觉得有收获请点个赞鼓励一下!

🌟:收藏文章,方便回看哦!

💬:评论交流,互相进步!