UI 开源组件Flutter图表范围选择器使用详解

更新时间：2022年08月29日 16:41:12 作者：张风捷特烈

这篇文章主要为大家介绍了UI 开源组件Flutter图表范围选择器使用详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪

前言

最近有一个小需求：图表支持局部显示，如下底部的区域选择器支持

左右拖动调节中间区域
拖拽中间区域，可以进行移动
图表数据根据中间区域的占比进行显示部分数据

这样当图表的数据量过大，不宜全部展示时，可选择的局部展示就是个不错的解决方案。由于一般的图表库没有提供该功能，这里自己通过绘制来实现以下，操作效果如下所示：

1. 使用 chart_range_selector

目前这个范围选择器已经发布到 pub 上了，名字是 chart_range_selector。大家可以通过依赖进行添加

dependencies:
  chart_range_selector: ^1.0.0

这个库本身是作为独立 UI 组件存在的，在拖拽过程中改变区域范围时，会触发回调。使用者可以通过监听来获取当前区域的范围。这里的区域起止是以分率的形式给出的，也就是最左侧是 0 最右侧是 1 。如下的区域范围是 0.26 ~ 0.72 。

ChartRangeSelector(
  height: 30,
  initStart: 0.4,
  initEnd: 0.6,
  onChartRangeChange: _onChartRangeChange,
),
void _onChartRangeChange(double start, double end) {
  print("start:$start, end:$end");
}

封装的组件名为： ChartRangeSelector ，提供了如下的一些配置参数：

配置项	类型	简述
initStart	double	范围启始值 0~1
initEnd	double	范围终止值 0~1
height	double	高度值
onChartRangeChange	OnChartRangeChange	范围变化回调
bgStorkColor	Color	背景线条颜色
bgFillColor	Color	背景填充颜色
rangeColor	Color	区域颜色
rangeActiveColor	Color	区域激活颜色
dragBoxColor	Color	左右拖拽块颜色
dragBoxActiveColor	Color	左右拖拽块激活颜色

2. ChartRangeSelector 实现思路分析

这个组件整体上是通过 ChartRangeSelectorPainter 绘制出来的，其实这些图形都是挺规整的，绘制来说并不是什么难事。

重点在于事件的处理，拖拽不同的部位需要处理不同的逻辑，还涉及对拖拽部位的校验、高亮示意，对这块的整合还是需要一定的功力的。

代码中通过 RangeData 可监听对象为绘制提供必要的数据，其中 minGap 用于控制范围的最小值，保证范围不会过小。

另外定义了 OperationType 枚举表示操作，其中有四个元素，none 表示没有拖拽的普通状态；

dragHead 表示拖动起始块，dragTail 表示拖动终止块，dragZone 表示拖动范围区域。

enum OperationType{
  none,
  dragHead,
  dragTail,
  dragZone
}
class RangeData extends ChangeNotifier {
  double start;
  double end;
  double minGap;
  OperationType operationType=OperationType.none;
  RangeData({this.start = 0, this.end = 1,this.minGap=0.1});
  //暂略相关方法...
}

在组件构建中，通过 LayoutBuilder 获取组件的约束信息，从而获得约束区域宽度最大值，也就是说组件区域的宽度值由使用者自行约束，该组件并不强制指定。

使用 SizedBox 限定画板的高度，通过 CustomPaint 组件使用 ChartRangeSelectorPainter 进行绘制。

使用 GestureDetector 组件进行手势交互监听，这就是该组件整体上实现的思路。

3.核心代码实现分析

可以看出，这个组件的核心就是 绘制 + 手势交互 。其中绘制比较简单，就是根据 RangeData 数据和颜色配置画些方块而已，稍微困难一点的是对左右控制柄位置的计算。

另外，三个可拖拽物的激活状态是通过 RangeData#operationType 进行判断的。

也就是说所有问题的焦点都集中在 手势交互 中对 RangeData 数据的更新。如下是处理按下的逻辑，当触电横坐标左右 10 逻辑像素之内，表示激活头部。

如下 tag1 处通过 dragHead 方法更新 operationType 并触发通知，这样画板绘制时就会激活头部块，右侧和中间的激活同理。

---->[RangeData#dragHead]----
void dragHead(){
  operationType=OperationType.dragHead;
  notifyListeners();
}

void _onPanDown(DragDownDetails details, double width) {
  double start = width * rangeData.start;
  double x = details.localPosition.dx;
  double end = width * rangeData.end;
  if (x >= start - 10 && x <= end + 10) {
    if ((start - details.localPosition.dx).abs() < 10) {
      rangeData.dragHead(); // tag1
      return;
    }
    if ((end - details.localPosition.dx).abs() < 10) {
      rangeData.dragTail();
      return;
    }
    rangeData.dragZone();
  }
}

对于拖手势的处理，是比较复杂的。如下根据 operationType 进行不同的逻辑处理，比如当 dragHead 时，触发 RangeData#moveHead 方法移动 start 值。这里将具体地逻辑封装在 RangeData 类中。

可以使代码更加简洁明了，每个操作都有 bool 返回值用于校验区域也没有发生变化，比如拖拽到 0 时，继续拖拽是会触发事件的，此时返回 false，避免无意义的 onChartRangeChange 回调触发。

void _onUpdate(DragUpdateDetails details, double width) {
  bool changed = false;
  if (rangeData.operationType == OperationType.dragHead) {
    changed = rangeData.moveHead(details.delta.dx / width);
  }
  if (rangeData.operationType == OperationType.dragTail) {
    changed = rangeData.moveTail(details.delta.dx / width);
  }
  if (rangeData.operationType == OperationType.dragZone) {
    changed = rangeData.move(details.delta.dx / width);
  }
  if (changed) widget.onChartRangeChange.call(rangeData.start, rangeData.end);
}

如下是 RangeData#moveHead 的处理逻辑，_recordStart 用于记录起始值，如果移动后未改变，返回 false。表示不执行通知和触发回调。

---->[RangeData#moveHead]----
bool moveHead(double ds) {
  start += ds;
  start = start.clamp(0, end - minGap);
  if (start == _recordStart) return false;
  _recordStart = start;
  notifyListeners();
  return true;
}

4. 结合图表使用

下面是结合 charts_flutter 图标库实现的范围显示案例。其中核心点是 domainAxis 可以通过 NumericAxisSpec 来显示某个范围的数据，而 ChartRangeSelector 提供拽的交互操作来更新这个范围，可谓相辅相成。

class RangeChartDemo extends StatefulWidget {
  const RangeChartDemo({Key? key}) : super(key: key);
  @override
  State<RangeChartDemo> createState() => _RangeChartDemoState();
}
class _RangeChartDemoState extends State<RangeChartDemo> {
  List<ChartData> data = [];
  int start = 0;
  int end = 0;
  @override
  void initState() {
    super.initState();
    data = randomDayData(count: 96);
    start = 0;
    end = (0.8 * data.length).toInt();
  }
  Random random = Random();
  List<ChartData> randomDayData({int count = 1440}) {
    return List.generate(count, (index) {
      int value = 50 + random.nextInt(200);
      return ChartData(index, value);
    });
  }
  @override
  Widget build(BuildContext context) {
    List<charts.Series<ChartData, int>> seriesList = [
      charts.Series<ChartData, int>(
        id: 'something',
        colorFn: (_, __) => charts.MaterialPalette.blue.shadeDefault,
        domainFn: (ChartData sales, _) => sales.index,
        measureFn: (ChartData sales, _) => sales.value,
        data: data,
      )
    ];
    return Column(
      children: [
        Expanded(
          child: charts.LineChart(seriesList,
              animate: false,
              primaryMeasureAxis: const charts.NumericAxisSpec(
                  tickProviderSpec: charts.BasicNumericTickProviderSpec(desiredTickCount: 5),),
              domainAxis: charts.NumericAxisSpec(
                viewport: charts.NumericExtents(start, end),
              )),
        ),
        const SizedBox(
          height: 10,
        ),
        SizedBox(
          width: 400,
          child: ChartRangeSelector(
              height: 30,
              initEnd: 0.5,
              initStart: 0.3,
              onChartRangeChange: (start, end) {
                this.start = (start * data.length).toInt();
                this.end = (end * data.length).toInt();
                setState(() {});
              }),
        ),
      ],
    );
  }
}
class ChartData {
  final int index;
  final int value;
  ChartData(this.index, this.value);
}

以上就是UI 开源组件Flutter图表范围选择器使用详解的详细内容，更多关于Flutter图表范围选择器的资料请关注脚本之家其它相关文章！

您可能感兴趣的文章:

android使用ViewPager组件实现app引导查看页面
这篇文章主要为大家详细介绍了android使用ViewPager组件实现app引导查看页面，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2018-07-07
基于Flutter制作一个图像滤镜
很多时候，我们需要一些特效功能，比如给图片做个滤镜什么的，那么如果在flutter中，如果要实现这样的滤镜功能应该怎么处理呢？一起来看看吧
2023-06-06
Android实现可以展开的TextView
这篇文章主要为大家详细介绍了Android实现可以展开的TextView，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2017-11-11
Android自定义双向进度条的实现代码
本篇文章主要介绍了Android自定义双向进度条的实现代码，非常具有实用的价值，有兴趣的同学一起来了解一下
2017-09-09
Android应用更新之自动检测版本及自动升级
这篇文章主要为大家详细介绍了Android应用更新之自动检测版本及自动升级，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2018-09-09
Android 中退出多个activity的经典方法
这篇文章主要介绍了Android 中退出多个activity的经典方法的相关资料,本文给大家分享两种方法，在这小编给大家推荐使用第一种方法，对此文感兴趣的朋友可以参考下
2016-09-09
Android中NavigationView的使用与相关问题解决
大家都知道NavigationView的引入让 Android侧边栏实现起来相当方便，最近公司项目中也使用这个新的控件完成了侧边栏的改版。在使用过程中遇到一些问题所以记录一下。本文分为两个部分，一是基本使用，二是相关问题的解决，感兴趣的朋友们下面来一起看看吧。
2016-10-10
使用Kotlin开发Android应用教程
这篇文章主要为大家详细介绍了使用Kotlin开发Android应用的教程，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2017-05-05
详解Android Bitmap的常用压缩方式
这篇文章主要介绍了详解Android Bitmap的常用压缩方式，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2018-01-01
android读取短信示例分享
这篇文章主要介绍了android读取短信示例,需要的朋友可以参考下
2014-02-02