【Flutter】graphic图表实现自定义tooltip

已于 2024-02-20 17:28:48 修改
阅读量1.1k 收藏 13
点赞数 9
分类专栏： Flutter 文章标签： flutter 图表
于 2023-11-24 16:44:50 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_52418790/article/details/134598380
版权

renderer

在这里插入图片描述

graphic中tooltip的TooltipGuide类提供了renderer方法，接收三个参数Size类型，Offset类型，Map<int, Tuple>类型。可查到的文档是真的少，所以只能在源码中扒拉例子，做符合需求的修改。

官方github示例

官方示例

这个例子感觉像是tooltip和提供的那些属性的源码实现，然后改变了背景颜色等，但如果实现想echarts那样对每条线的数据前增加颜色块区分，还是要自己摸索。先看一下这个例子都做了什么吧

List<MarkElement> simpleTooltip(
    Size size,
    Offset anchor,
    Map<int, Tuple> selectedTuples,
  ) {
    // 返回的元素列表
    List<MarkElement> elements;

    // 生成tooltip内容
    String textContent = '';
    // 选中的数据 ({date: xxx, name: 线条1, points: xxx}, {date: xx, name: 线条2, points: xx}...)
    final selectedTupleList = selectedTuples.values;
    // 选中的数据的字段名列表
    // 单条线：[date, points]
    // 多条线：会通过name区分不同线的数值[date, name, points]
    final fields = selectedTupleList.first.keys.toList();

    // 如果只有一条线
    if (selectedTuples.length == 1) {
      // 取出选中的数据
      final original = selectedTupleList.single;
      // 取出第一个字段的值
      var field = fields.first;
      // 将第一个字段的值放入到tooltip的第一行
      /**
       * 此时的数据结构是：
       * date: 2023-11-24
      */
      textContent += '$field: ${original[field]}';
      // 遍历字段名列表
      for (var i = 1; i < fields.length; i++) {
        // 取出第i个字段
        field = fields[i];
        // 将第i个字段的值放入到tooltip的第二行
        /**
         * 遍历后的数据结构是：
         * date: 2023-11-24
         * points: 123
        */
        textContent += '\n$field: ${original[field]}';
      }
    } else {
      // 如果有多条线
      // 遍历选中的数据（几条线几条数据），将每个数据的第二个字段和第三个字段的值放入到tooltip的第二行和第三行
      for (var original in selectedTupleList) {
        // 取出第一个字段
        final domainField = fields.first;
        // 取出最后一个字段
        final measureField = fields.last;
        /**
         * 遍历结束后的数据结构是：
         * 2023-11-24：线条1
         * 2023-11-24：线条2
         * ....
        */
        textContent += '\n${original[domainField]}: ${original[measureField]}';
      }
    }

    // 提出一些变量
    const textStyle = TextStyle(fontSize: 12, color: Colors.white);
    const padding = EdgeInsets.all(5);
    const align = Alignment.topRight;
    const offset = Offset(5, -5);
    const elevation = 1.0;
    const backgroundColor = Colors.black;

    final painter = TextPainter(
      text: TextSpan(text: textContent, style: textStyle),
      textDirection: TextDirection.ltr,
    );
    painter.layout();

    // 计算tooltip的宽高
    final width = padding.left + painter.width + padding.right;
    final height = padding.top + painter.height + padding.bottom;

    // 调整tooltip弹框（包含内容）的位置
    final paintPoint = getBlockPaintPoint(
      anchor + offset,
      width,
      height,
      align,
    );

    // 调整tooltip弹框（不包含内容）的位置
    final window = Rect.fromLTWH(
      paintPoint.dx,
      paintPoint.dy,
      width,
      height,
    );

    // 计算tooltip文本的位置
    var textPaintPoint = paintPoint + padding.topLeft;
    
    elements = <MarkElement>[
      RectElement(
          rect: window,
          style: PaintStyle(fillColor: backgroundColor, elevation: elevation)),
      LabelElement(
          text: textContent,
          anchor: textPaintPoint,
          style:
              LabelStyle(textStyle: textStyle, align: Alignment.bottomRight)),
    ];

    return elements;
  }

效果
在这里插入图片描述

根据需求调整

在这里插入图片描述

改动后代码

List<MarkElement> simpleTooltip(
    Size size,
    Offset anchor,
    Map<int, Tuple> selectedTuples,
  ) {
    // 返回的元素列表
    List<MarkElement> elements;
    // 标识元素列表
    List<MarkElement> tagElements = [];

    // 生成tooltip内容
    String textContent = '';
    // 选中的数据 ({date: xxx, name: 线条1, points: xxx}, {date: xx, name: 线条2, points: xx}...)
    final selectedTupleList = selectedTuples.values;
    // 选中的数据的字段名列表 [date, name, points]
    final fields = selectedTupleList.first.keys.toList();

    // 选中的数据的第一个数据的第一个字段的值，放入到tooltip的第一行
    /**
     * 目前的数据结构是：
     * 2023-11-24
     */
    textContent = '${selectedTupleList.first[fields.first]}';
    // 遍历选中的数据（几条线几条数据），将每个数据的第二个字段和第三个字段的值放入到tooltip的第二行和第三行
    for (var original in selectedTupleList) {
      final domainField = fields[1];
      final measureField = fields.last;
      /**
       * 遍历结束后的数据结构是：
       * 2023-11-24
       * 线条1: 123
       * 线条2: 456
       * ....
       */
      textContent += '\n  ${original[domainField]}: ${original[measureField]}';
    }

    // 提出一些变量
    const textStyle = TextStyle(fontSize: 12, color: Colors.black, height: 2);
    const padding = EdgeInsets.all(5);
    const align = Alignment.topRight;
    const offset = Offset(5, -5);
    const elevation = 1.0;
    const backgroundColor = Colors.white;

    final painter = TextPainter(
      text: TextSpan(text: textContent, style: textStyle),
      textDirection: ui.TextDirection.ltr,
    );
    painter.layout();

    // tooltip的宽高
    final width = padding.left + painter.width + padding.right;
    final height = padding.top + painter.height + padding.bottom;
    // tooltip的位置
    // 大概根据中间的数据判断算了下位置,避免一直在左或右,边界超出屏幕
    final move = anchor < const Offset(250, 90)
        ? anchor + offset - const Offset(-10, -40)
        : anchor + Offset(-width - 20, 40);

    final paintPoint = getBlockPaintPoint(
      move,
      width,
      height,
      align,
    );

    final window = Rect.fromLTWH(
      paintPoint.dx - 10, //横向位置
      paintPoint.dy,
      width + 20,
      height,
    );

    var textPaintPoint = paintPoint + padding.topLeft;

    // 生成tooltip线条前的标识元素
    for (int i = 0; i < selectedTupleList.length; i++) {
      tagElements.add(
        LabelElement(
            text: '●',
            anchor: textPaintPoint + padding.topLeft + Offset(-15, 26 + i * 23),
            style: LabelStyle(
                textStyle: TextStyle(
                    color: Defaults.colors10[i],
                    fontWeight: FontWeight.w900,
                    fontSize: 12),
                align: Alignment.bottomRight)),
      );
    }

    elements = <MarkElement>[
      RectElement(
          rect: window,
          style: PaintStyle(fillColor: backgroundColor, elevation: elevation)),
      ...tagElements,
      LabelElement(
          text: textContent,
          anchor: textPaintPoint,
          style:
              LabelStyle(textStyle: textStyle, align: Alignment.bottomRight)),
    ];

    return elements;
  }

效果
在这里插入图片描述

整体代码

// linePage.dart
import 'package:flutter/gestures.dart';
import 'package:flutter/material.dart';
import 'package:graphic/graphic.dart';
import 'dart:ui' as ui;
import './components/static/data.dart';

class linePage extends StatelessWidget {
  linePage({super.key});

  final GlobalKey<ScaffoldState> _scaffoldKey = GlobalKey<ScaffoldState>();

  List<MarkElement> simpleTooltip(
    Size size,
    Offset anchor,
    Map<int, Tuple> selectedTuples,
  ) {
    // 返回的元素列表
    List<MarkElement> elements;
    // 标识元素列表
    List<MarkElement> tagElements = [];

    // 生成tooltip内容
    String textContent = '';
    // 选中的数据 ({date: xxx, name: 线条1, points: xxx}, {date: xx, name: 线条2, points: xx}...)
    final selectedTupleList = selectedTuples.values;
    // 选中的数据的字段名列表 [date, name, points]
    final fields = selectedTupleList.first.keys.toList();

    // 选中的数据的第一个数据的第一个字段的值，放入到tooltip的第一行
    /**
     * 目前的数据结构是：
     * 2023-11-24
     */
    textContent = '${selectedTupleList.first[fields.first]}';

    // 遍历选中的数据（几条线几条数据），将每个数据的第二个字段和第三个字段的值放入到tooltip的第二行和第三行
    for (var original in selectedTupleList) {
      final domainField = fields[1];
      final measureField = fields.last;
      /**
       * 遍历结束后的数据结构是：
       * 2023-11-24
       * 线条1: 123
       * 线条2: 456
       * ....
       */
      textContent += '\n  ${original[domainField]}: ${original[measureField]}';
    }

    // 提出一些变量
    const textStyle = TextStyle(fontSize: 12, color: Colors.black, height: 2);
    const padding = EdgeInsets.all(5);
    const align = Alignment.topRight;
    const offset = Offset(5, -5);
    const elevation = 1.0;
    const backgroundColor = Colors.white;

    final painter = TextPainter(
      text: TextSpan(text: textContent, style: textStyle),
      textDirection: ui.TextDirection.ltr,
    );
    painter.layout();

    // tooltip的宽高
    final width = padding.left + painter.width + padding.right;
    final height = padding.top + painter.height + padding.bottom;
    // tooltip的位置
    // 大概根据中间的数据判断算了下位置,避免一直在左或右,边界超出屏幕
    final move = anchor < const Offset(250, 90)
        ? anchor + offset - const Offset(-10, -40)
        : anchor + Offset(-width - 20, 40);

    final paintPoint = getBlockPaintPoint(
      move,
      width,
      height,
      align,
    );

    final window = Rect.fromLTWH(
      paintPoint.dx - 10, //横向位置
      paintPoint.dy,
      width + 20,
      height,
    );

    var textPaintPoint = paintPoint + padding.topLeft;

    // 生成tooltip线条前的标识元素
    for (int i = 0; i < selectedTupleList.length; i++) {
      tagElements.add(
        LabelElement(
            text: '●',
            anchor: textPaintPoint + padding.topLeft + Offset(-15, 26 + i * 23),
            style: LabelStyle(
                textStyle: TextStyle(
                    color: Defaults.colors10[i],
                    fontWeight: FontWeight.w900,
                    fontSize: 12),
                align: Alignment.bottomRight)),
      );
    }

    elements = <MarkElement>[
      RectElement(
          rect: window,
          style: PaintStyle(fillColor: backgroundColor, elevation: elevation)),
      ...tagElements,
      LabelElement(
          text: textContent,
          anchor: textPaintPoint,
          style:
              LabelStyle(textStyle: textStyle, align: Alignment.bottomRight)),
    ];

    return elements;
  }

  @override
  Widget build(BuildContext context) {
    return SingleChildScrollView(
      child: Center(
        child: Column(
          children: <Widget>[
            Container(
              padding: const EdgeInsets.fromLTRB(20, 40, 20, 5),
              child: const Text(
                'Smooth Line and Area chart',
                style: TextStyle(fontSize: 20),
              ),
            ),
            Container(
              margin: const EdgeInsets.only(top: 10),
              width: 350,
              height: 300,
              child: Chart(
                // 数据源
                data: invalidData,
                // 变量配置
                variables: {
                  'date': Variable(
                    accessor: (Map map) => map['date'] as String,
                    scale: OrdinalScale(
                      tickCount: 5, // x轴刻度数量
                    ),
                  ),
                  'name': Variable(
                    accessor: (Map map) => map['name'] as String,
                  ),
                  'points': Variable(
                    accessor: (Map map) => (map['points'] ?? double.nan) as num,
                  ),
                },

                marks: [
                  // 线条
                  LineMark(
                  	// 如果单线条加name则必须有position属性配置，否则是一条直线
                    position:
                        Varset('date') * Varset('points') / Varset('name'),
                    shape: ShapeEncode(
                      value: BasicLineShape(smooth: true),
                    ),
                    // 粗细
                    size: SizeEncode(value: 1.5),
                  ),
                  // 线条与X轴之间区域填充
                  AreaMark(
                  	// 如果单线条加name则必须有position属性配置，否则不显示
                    position:
                        Varset('date') * Varset('points') / Varset('name'),
                    shape: ShapeEncode(
                      value:
                          BasicAreaShape(smooth: true), // smooth: true 使线条变得平滑
                    ),
                    color: ColorEncode(
                      value: Colors.pink.withAlpha(80),
                    ),
                  ),
                ],
                // 坐标轴配置
                axes: [
                  Defaults.horizontalAxis,
                  Defaults.verticalAxis,
                ],
                selections: {
                  'touchMove': PointSelection(
                    on: {
                      GestureType.scaleUpdate,
                      GestureType.tapDown,
                      GestureType.hover,
                      GestureType.longPressMoveUpdate
                    },
                    dim: Dim.x,
                  )
                },
                // 触摸弹框提示
                tooltip: TooltipGuide(
                  // 跟随鼠标位置
                  // followPointer: [false, true],
                  // align: Alignment.topLeft, // 弹框对于点击位置的对齐方式
                  // offset: const Offset(-20, -20), // 偏移量
                  // 使用自定义需要注释上面的一些配置
                  renderer: simpleTooltip,
                ),
                // 十字准线
                crosshair: CrosshairGuide(followPointer: [false, true]),
              ),
            ),
            Container(
              padding: const EdgeInsets.fromLTRB(20, 40, 20, 5),
              child: const Text(
                'Group interactions',
                style: TextStyle(fontSize: 20),
              ),
            ),
            Container(
              margin: const EdgeInsets.only(top: 10),
              width: 350,
              height: 300,
              child: Chart(
                data: invalidData1,
                variables: {
                  'date': Variable(
                    accessor: (Map map) => map['date'] as String,
                    scale: OrdinalScale(tickCount: 5, inflate: true),
                  ),
                  'name': Variable(
                    accessor: (Map map) => map['name'] as String,
                  ),
                  'points': Variable(
                    accessor: (Map map) => (map['points'] ?? double.nan) as num,
                  ),
                },
                coord: RectCoord(horizontalRange: [0.1, 0.99]),
                marks: [
                  LineMark(
                    position:
                        Varset('date') * Varset('points') / Varset('name'),
                    shape: ShapeEncode(value: BasicLineShape(smooth: true)),
                    size: SizeEncode(value: 1.5),
                    color: ColorEncode(
                      variable: 'name',
                      values: Defaults.colors10,
                      // updaters: {
                      //   'groupMouse': {false: (color) => color.withAlpha(100)},
                      //   // 'groupTouch': {false: (color) => color.withAlpha(100)},
                      // },
                    ),
                  ),
                  // PointMark(
                  //   color: ColorEncode(
                  //     variable: 'name',
                  //     values: Defaults.colors10,
                  //     updaters: {
                  //       'groupMouse': {false: (color) => color.withAlpha(100)},
                  //       'groupTouch': {false: (color) => color.withAlpha(100)},
                  //     },
                  //   ),
                  // ),
                ],
                axes: [
                  Defaults.horizontalAxis,
                  Defaults.verticalAxis,
                ],
                // // 提示框选项配置
                selections: {
                  '666': PointSelection(
                    on: {GestureType.hover, GestureType.tap},
                    // 设备
                    devices: {PointerDeviceKind.mouse},
                    variable: 'date',
                  ),
                  'groupMouse': PointSelection(
                    on: {
                      GestureType.hover,
                    },
                    // variable: 'name',

                    devices: {PointerDeviceKind.mouse},
                  ),
                  'tooltipTouch': PointSelection(
                    on: {
                      GestureType.scaleUpdate,
                      GestureType.tapDown,
                      GestureType.longPressMoveUpdate
                    },
                    // variable: 'name',
                    devices: {PointerDeviceKind.touch},
                  ),
                },
                tooltip: TooltipGuide(
                    selections: {'tooltipTouch', '666'},
                    // multiTuples: true,
                    // followPointer: [false, true],
                    // align: Alignment.topLeft,
                    // // mark: 0,
                    // // 与上方selections中定义的variable相排斥
                    // variables: [
                    //   // 'date',
                    //   'name',
                    //   'points',
                    // ],
                    renderer: simpleTooltip),
                crosshair: CrosshairGuide(
                  selections: {'tooltipTouch', '666'},
                  styles: [
                    PaintStyle(
                        strokeColor: const Color.fromARGB(255, 92, 68, 68)),
                    PaintStyle(
                        strokeColor: const Color.fromARGB(0, 158, 154, 154)),
                  ],
                  followPointer: [false, true],
                ),
              ),
            ),
          ],
        ),
      ),
    );
  }
}



// data.dart
const invalidData1 = [
  {"date": "2016-01-04", "name": "线条1", "points": 126.12},
  {"date": "2016-01-05", "name": "线条1", "points": 125.688},
  {"date": "2016-01-06", "name": "线条1", "points": 119.704},
  {"date": "2016-01-07", "name": "线条1", "points": 120.19},
  {"date": "2016-01-08", "name": "线条1", "points": 121.157},
  {"date": "2016-01-11", "name": "线条1", "points": 117},
  {"date": "2016-01-12", "name": "线条1", "points": 120},
  {"date": "2016-01-13", "name": "线条1", "points": 122},
  {"date": "2016-01-14", "name": "线条1", "points": 117.76},
  {"date": "2016-01-15", "name": "线条1", "points": 114.397},
  {"date": "2016-01-18", "name": "线条1", "points": 116.373},
  {"date": "2016-01-19", "name": "线条1", "points": 120.547},
  {"date": "2016-01-20", "name": "线条1", "points": 113.733},
  {"date": "2016-01-21", "name": "线条1", "points": 114.098},
  {"date": "2016-01-22", "name": "线条1", "points": 123.833},
  {"date": "2016-01-25", "name": "线条1", "points": 125},
  {"date": "2016-01-26", "name": "线条1", "points": 124.866},
  {"date": "2016-01-27", "name": "线条1", "points": 120.264},
  {"date": "2016-01-28", "name": "线条1", "points": 122.296},
  {"date": "2016-01-29", "name": "线条1", "points": 124.502},
  {"date": "2016-02-01", "name": "线条1", "points": 127.936},
  {"date": "2016-02-02", "name": "线条1", "points": null},
  {"date": "2016-02-03", "name": "线条1", "points": 129.95},
  {"date": "2016-02-04", "name": "线条1", "points": 129.275},
  {"date": "2016-02-05", "name": "线条1", "points": 127.898},
  {"date": "2016-02-08", "name": "线条1", "points": 134.9},
  {"date": "2016-02-09", "name": "线条1", "points": 122.819},
  {"date": "2016-02-10", "name": "线条1", "points": 120.108},
  {"date": "2016-02-11", "name": "线条1", "points": 119.447},
  {"date": "2016-02-12", "name": "线条1", "points": 117.8},
  {"date": "2016-02-15", "name": "线条1", "points": null},
  {"date": "2016-02-16", "name": "线条1", "points": 121.865},
  {"date": "2016-02-17", "name": "线条1", "points": 126.3},
  {"date": "2016-02-18", "name": "线条1", "points": 128.259},
  {"date": "2016-02-19", "name": "线条1", "points": 125.724},
  {"date": "2016-02-22", "name": "线条1", "points": 130},
  {"date": "2016-02-23", "name": "线条1", "points": 129.948},
  {"date": "2016-02-24", "name": "线条1", "points": 132.5},
  {"date": "2016-02-25", "name": "线条1", "points": 128.08},
  {"date": "2016-02-26", "name": "线条1", "points": 122},
  {"date": "2016-02-29", "name": "线条1", "points": 122},
  {"date": "2016-03-01", "name": "线条1", "points": 123.449},
  {"date": "2016-03-02", "name": "线条1", "points": double.nan},
  {"date": "2016-03-03", "name": "线条1", "points": 132},
  {"date": "2016-03-04", "name": "线条1", "points": 135},
  {"date": "2016-03-07", "name": "线条1", "points": 123.905},
  {"date": "2016-03-08", "name": "线条1", "points": 125.155},
  {"date": "2016-03-09", "name": "线条1", "points": 126},
  {"date": "2016-03-10", "name": "线条1", "points": 126.778},
  {"date": "2016-03-11", "name": "线条1", "points": 129.656},
  {"date": "2016-03-14", "name": "线条1", "points": 127.64},
  {"date": "2016-03-15", "name": "线条1", "points": 124.786},
  {"date": "2016-03-16", "name": "线条1", "points": 124.469},
  {"date": "2016-03-17", "name": "线条1", "points": 123.5},
  {"date": "2016-03-18", "name": "线条1", "points": 124.061},
  {"date": "2016-03-21", "name": "线条1", "points": 123.5},
  {"date": "2016-03-22", "name": "线条1", "points": 129.002},
  {"date": "2016-03-23", "name": "线条1", "points": 129},
  {"date": "2016-03-24", "name": "线条1", "points": 131.31},
  {"date": "2016-03-29", "name": "线条1", "points": 133},
  {"date": "2016-03-30", "name": "线条1", "points": 129.298},
  {"date": "2016-03-31", "name": "线条1", "points": 127.4},
  {"date": "2016-04-01", "name": "线条1", "points": 122.376},
  {"date": "2016-04-04", "name": "线条1", "points": 119.467},
  {"date": "2016-04-05", "name": "线条1", "points": 120.695},
  {"date": "2016-04-06", "name": "线条1", "points": 118.725},
  {"date": "2016-04-07", "name": "线条1", "points": 127.539},
  {"date": "2016-04-08", "name": "线条1", "points": 129.8},
  {"date": "2016-04-11", "name": "线条1", "points": 129.5},
  {"date": "2016-04-12", "name": "线条1", "points": 134.465},
  {"date": "2016-04-13", "name": "线条1", "points": 133},
  {"date": "2016-04-14", "name": "线条1", "points": 137.35},
  {"date": "2016-04-15", "name": "线条1", "points": 137.2},
  {"date": "2016-04-18", "name": "线条1", "points": 132.611},
  {"date": "2016-04-19", "name": "线条1", "points": 135.479},
  {"date": "2016-04-20", "name": "线条1", "points": 139.05},
  {"date": "2016-04-21", "name": "线条1", "points": 142},
  {"date": "2016-04-22", "name": "线条1", "points": 135.761},
  {"date": "2016-04-25", "name": "线条1", "points": 136.174},
  {"date": "2016-04-26", "name": "线条1", "points": 134.782},
  {"date": "2016-04-27", "name": "线条1", "points": 128},
  {"date": "2016-04-28", "name": "线条1", "points": 121.5},
  {"date": "2016-04-29", "name": "线条1", "points": 120},
  {"date": "2016-05-02", "name": "线条1", "points": 123.966},
  {"date": "2016-05-03", "name": "线条1", "points": 122.538},
  {"date": "2016-05-04", "name": "线条1", "points": 120},
  {"date": "2016-05-05", "name": "线条1", "points": 120.21},
  {"date": "2016-05-06", "name": "线条1", "points": 121.01},
  {"date": "2016-05-09", "name": "线条1", "points": double.nan},
  {"date": "2016-05-10", "name": "线条1", "points": 120.622},
  {"date": "2016-05-11", "name": "线条1", "points": 123.85},
  {"date": "2016-05-12", "name": "线条1", "points": 122.963},
  {"date": "2016-05-13", "name": "线条1", "points": 126},
  {"date": "2016-05-17", "name": "线条1", "points": 130},
  {"date": "2016-05-18", "name": "线条1", "points": 128.845},
  {"date": "2016-05-19", "name": "线条1", "points": 130.17},
  {"date": "2016-05-20", "name": "线条1", "points": 129.741},
  {"date": "2016-05-23", "name": "线条1", "points": 129.668},
  {"date": "2016-05-24", "name": "线条1", "points": 126.886},
  {"date": "2016-05-25", "name": "线条1", "points": 128.239},
  {"date": "2016-05-26", "name": "线条1", "points": 127.239},
  {"date": "2016-05-27", "name": "线条1", "points": 127.457},
  {"date": "2016-05-30", "name": "线条1", "points": 127.37},
  {"date": "2016-05-31", "name": "线条1", "points": 130.756},
  {"date": "2016-06-01", "name": "线条1", "points": 133.232},
  {"date": "2016-06-02", "name": "线条1", "points": 126.47},
  {"date": "2016-06-03", "name": "线条1", "points": 126.385},
  {"date": "2016-06-06", "name": "线条1", "points": 128.331},
  {"date": "2016-06-07", "name": "线条1", "points": 130.914},
  {"date": "2016-06-08", "name": "线条1", "points": 133},
  {"date": "2016-06-09", "name": "线条1", "points": 133.041},
  {"date": "2016-06-10", "name": "线条1", "points": 133.041},
  {"date": "2016-06-13", "name": "线条1", "points": 129},
  {"date": "2016-06-14", "name": "线条1", "points": 129.166},
  {"date": "2016-06-15", "name": "线条1", "points": 124.687},
  {"date": "2016-06-16", "name": "线条1", "points": 122.77},
  {"date": "2016-06-17", "name": "线条1", "points": 126.461},
  {"date": "2016-06-20", "name": "线条1", "points": 127},
  {"date": "2016-06-21", "name": "线条1", "points": 125.594},
  {"date": "2016-06-22", "name": "线条1", "points": 127.438},
  {"date": "2016-06-23", "name": "线条1", "points": 124.44},
  {"date": "2016-06-24", "name": "线条1", "points": 122.131},
  {"date": "2016-06-27", "name": "线条1", "points": 120.53},
  {"date": "2016-06-28", "name": "线条1", "points": 120.296},
  {"date": "2016-06-29", "name": "线条1", "points": 125.877},
  {"date": "2016-06-30", "name": "线条1", "points": 126.404},
  {"date": "2016-01-04", "name": "线条2", "points": 130.914},
  {"date": "2016-01-05", "name": "线条2", "points": 133},
  {"date": "2016-01-06", "name": "线条2", "points": 159.704},
  {"date": "2016-01-07", "name": "线条2", "points": 133.19},
  {"date": "2016-01-08", "name": "线条2", "points": 202.157},
  {"date": "2016-01-11", "name": "线条2", "points": 128},
  {"date": "2016-01-12", "name": "线条2", "points": 138},
  {"date": "2016-01-13", "name": "线条2", "points": 152},
  {"date": "2016-01-14", "name": "线条2", "points": 157.76},
  {"date": "2016-01-15", "name": "线条2", "points": 134.397},
  {"date": "2016-01-18", "name": "线条2", "points": 170.373},
  {"date": "2016-01-19", "name": "线条2", "points": 140.547},
  {"date": "2016-01-20", "name": "线条2", "points": 133.733},
  {"date": "2016-01-21", "name": "线条2", "points": 124.098},
  {"date": "2016-01-22", "name": "线条2", "points": 113.833},
  {"date": "2016-01-25", "name": "线条2", "points": 125},
  {"date": "2016-01-26", "name": "线条2", "points": 154.866},
  {"date": "2016-01-27", "name": "线条2", "points": 130.264},
  {"date": "2016-01-28", "name": "线条2", "points": 142.296},
  {"date": "2016-01-29", "name": "线条2", "points": 114.502},
  {"date": "2016-02-01", "name": "线条2", "points": 137.936},
  {"date": "2016-02-02", "name": "线条2", "points": null},
  {"date": "2016-02-03", "name": "线条2", "points": 169.95},
  {"date": "2016-02-04", "name": "线条2", "points": 119.275},
  {"date": "2016-02-05", "name": "线条2", "points": 127.898},
  {"date": "2016-02-08", "name": "线条2", "points": 134.9},
  {"date": "2016-02-09", "name": "线条2", "points": 152.819},
  {"date": "2016-02-10", "name": "线条2", "points": 100.108},
  {"date": "2016-02-11", "name": "线条2", "points": 109.447},
  {"date": "2016-02-12", "name": "线条2", "points": 127.8},
  {"date": "2016-02-15", "name": "线条2", "points": null},
  {"date": "2016-02-22", "name": "线条2", "points": 120},
  {"date": "2016-02-23", "name": "线条2", "points": 149.948},
  {"date": "2016-02-24", "name": "线条2", "points": 102.5},
  {"date": "2016-03-03", "name": "线条2", "points": 142},
  {"date": "2016-03-04", "name": "线条2", "points": 165},
  {"date": "2016-03-07", "name": "线条2", "points": 173.905},
  {"date": "2016-03-08", "name": "线条2", "points": 128.155},
  {"date": "2016-02-25", "name": "线条2", "points": 118.08},
  {"date": "2016-04-04", "name": "线条2", "points": 149.467},
  {"date": "2016-04-05", "name": "线条2", "points": 130.695},
  {"date": "2016-04-06", "name": "线条2", "points": 128.725},
  {"date": "2016-04-07", "name": "线条2", "points": 137.539},
  {"date": "2016-04-08", "name": "线条2", "points": 135.8},
  {"date": "2016-04-11", "name": "线条2", "points": 138.5},
  {"date": "2016-04-12", "name": "线条2", "points": 124.465},
  {"date": "2016-04-13", "name": "线条2", "points": 143},
  {"date": "2016-04-14", "name": "线条2", "points": 134.35},
  {"date": "2016-04-15", "name": "线条2", "points": 127.2},
  {"date": "2016-04-18", "name": "线条2", "points": 112.611},
  {"date": "2016-04-19", "name": "线条2", "points": 135.479},
  {"date": "2016-02-26", "name": "线条2", "points": 142},
  {"date": "2016-02-29", "name": "线条2", "points": 132},
  {"date": "2016-03-01", "name": "线条2", "points": 113.449},
  {"date": "2016-03-02", "name": "线条2", "points": double.nan},
  {"date": "2016-02-16", "name": "线条2", "points": 131.865},
  {"date": "2016-02-17", "name": "线条2", "points": 156.3},
  {"date": "2016-02-18", "name": "线条2", "points": 148.259},
  {"date": "2016-02-19", "name": "线条2", "points": 135.724},
  {"date": "2016-03-09", "name": "线条2", "points": 116},
  {"date": "2016-03-10", "name": "线条2", "points": 176.778},
  {"date": "2016-03-11", "name": "线条2", "points": 139.656},
  {"date": "2016-03-14", "name": "线条2", "points": 157.64},
  {"date": "2016-03-15", "name": "线条2", "points": double.nan},
  {"date": "2016-03-16", "name": "线条2", "points": 144.469},
  {"date": "2016-03-17", "name": "线条2", "points": 133.5},
  {"date": "2016-03-18", "name": "线条2", "points": 184.061},
  {"date": "2016-03-21", "name": "线条2", "points": 163.5},
  {"date": "2016-03-22", "name": "线条2", "points": 159.002},
  {"date": "2016-03-23", "name": "线条2", "points": 149},
  {"date": "2016-03-24", "name": "线条2", "points": 111.31},
  {"date": "2016-03-29", "name": "线条2", "points": 123},
  {"date": "2016-03-30", "name": "线条2", "points": 139.298},
  {"date": "2016-03-31", "name": "线条2", "points": 147.4},
  {"date": "2016-04-01", "name": "线条2", "points": 132.376},
  {"date": "2016-04-20", "name": "线条2", "points": 149.05},
  {"date": "2016-04-21", "name": "线条2", "points": 162},
  {"date": "2016-04-22", "name": "线条2", "points": 155.761},
  {"date": "2016-04-25", "name": "线条2", "points": 126.174},
  {"date": "2016-04-26", "name": "线条2", "points": 134.782},
  {"date": "2016-04-27", "name": "线条2", "points": 118},
  {"date": "2016-04-28", "name": "线条2", "points": 141.5},
  {"date": "2016-05-31", "name": "线条2", "points": 130.756},
  {"date": "2016-06-01", "name": "线条2", "points": 143.232},
  {"date": "2016-06-02", "name": "线条2", "points": 176.47},
  {"date": "2016-06-03", "name": "线条2", "points": 156.385},
  {"date": "2016-06-06", "name": "线条2", "points": 168.331},
  {"date": "2016-06-07", "name": "线条2", "points": 130.914},
  {"date": "2016-06-08", "name": "线条2", "points": 123},
  {"date": "2016-06-09", "name": "线条2", "points": 133.041},
  {"date": "2016-06-10", "name": "线条2", "points": 133.041},
  {"date": "2016-06-13", "name": "线条2", "points": 129},
  {"date": "2016-06-14", "name": "线条2", "points": null},
  {"date": "2016-06-15", "name": "线条2", "points": 114.687},
  {"date": "2016-06-16", "name": "线条2", "points": 122.77},
  {"date": "2016-06-17", "name": "线条2", "points": 146.461},
  {"date": "2016-06-20", "name": "线条2", "points": 127},
  {"date": "2016-06-21", "name": "线条2", "points": 155.594},
  {"date": "2016-06-22", "name": "线条2", "points": 127.438},
  {"date": "2016-06-23", "name": "线条2", "points": 134.44},
  {"date": "2016-06-24", "name": "线条2", "points": 112.131},
  {"date": "2016-06-27", "name": "线条2", "points": 100.53},
  {"date": "2016-06-28", "name": "线条2", "points": 150.296},
  {"date": "2016-06-29", "name": "线条2", "points": 135.877},
  {"date": "2016-06-30", "name": "线条2", "points": 126.404},
  {"date": "2016-04-29", "name": "线条2", "points": 130},
  {"date": "2016-05-02", "name": "线条2", "points": 123.966},
  {"date": "2016-05-03", "name": "线条2", "points": 122.538},
  {"date": "2016-05-04", "name": "线条2", "points": 130},
  {"date": "2016-05-05", "name": "线条2", "points": 120.21},
  {"date": "2016-05-06", "name": "线条2", "points": 131.01},
  {"date": "2016-05-09", "name": "线条2", "points": double.nan},
  {"date": "2016-05-10", "name": "线条2", "points": 120.622},
  {"date": "2016-05-11", "name": "线条2", "points": 153.85},
  {"date": "2016-05-12", "name": "线条2", "points": 162.963},
  {"date": "2016-05-13", "name": "线条2", "points": 146},
  {"date": "2016-05-17", "name": "线条2", "points": 130},
  {"date": "2016-05-18", "name": "线条2", "points": 138.845},
  {"date": "2016-05-19", "name": "线条2", "points": 120.17},
  {"date": "2016-05-20", "name": "线条2", "points": 149.741},
  {"date": "2016-05-23", "name": "线条2", "points": 119.668},
  {"date": "2016-05-24", "name": "线条2", "points": 136.886},
  {"date": "2016-05-25", "name": "线条2", "points": 108.239},
  {"date": "2016-05-26", "name": "线条2", "points": 147.239},
  {"date": "2016-05-27", "name": "线条2", "points": 127.457},
  {"date": "2016-05-30", "name": "线条2", "points": 137.37},
];

const invalidData = [
  {"date": "2016-01-04", "name": "线条1", "points": 126.12},
  {"date": "2016-01-05", "name": "线条1", "points": 125.688},
  {"date": "2016-01-06", "name": "线条1", "points": 119.704},
  {"date": "2016-01-07", "name": "线条1", "points": 120.19},
  {"date": "2016-01-08", "name": "线条1", "points": 121.157},
  {"date": "2016-01-11", "name": "线条1", "points": 117},
  {"date": "2016-01-12", "name": "线条1", "points": 120},
  {"date": "2016-01-13", "name": "线条1", "points": 122},
  {"date": "2016-01-14", "name": "线条1", "points": 117.76},
  {"date": "2016-01-15", "name": "线条1", "points": 114.397},
  {"date": "2016-01-18", "name": "线条1", "points": 116.373},
  {"date": "2016-01-19", "name": "线条1", "points": 120.547},
  {"date": "2016-01-20", "name": "线条1", "points": 113.733},
  {"date": "2016-01-21", "name": "线条1", "points": 114.098},
  {"date": "2016-01-22", "name": "线条1", "points": 123.833},
  {"date": "2016-01-25", "name": "线条1", "points": 125},
  {"date": "2016-01-26", "name": "线条1", "points": 124.866},
  {"date": "2016-01-27", "name": "线条1", "points": 120.264},
  {"date": "2016-01-28", "name": "线条1", "points": 122.296},
  {"date": "2016-01-29", "name": "线条1", "points": 124.502},
  {"date": "2016-02-01", "name": "线条1", "points": 127.936},
  {"date": "2016-02-02", "name": "线条1", "points": null},
  {"date": "2016-02-03", "name": "线条1", "points": 129.95},
  {"date": "2016-02-04", "name": "线条1", "points": 129.275},
  {"date": "2016-02-05", "name": "线条1", "points": 127.898},
  {"date": "2016-02-08", "name": "线条1", "points": 134.9},
  {"date": "2016-02-09", "name": "线条1", "points": 122.819},
  {"date": "2016-02-10", "name": "线条1", "points": 120.108},
  {"date": "2016-02-11", "name": "线条1", "points": 119.447},
  {"date": "2016-02-12", "name": "线条1", "points": 117.8},
  {"date": "2016-02-15", "name": "线条1", "points": null},
  {"date": "2016-02-16", "name": "线条1", "points": 121.865},
  {"date": "2016-02-17", "name": "线条1", "points": 126.3},
  {"date": "2016-02-18", "name": "线条1", "points": 128.259},
  {"date": "2016-02-19", "name": "线条1", "points": 125.724},
  {"date": "2016-02-22", "name": "线条1", "points": 130},
  {"date": "2016-02-23", "name": "线条1", "points": 129.948},
  {"date": "2016-02-24", "name": "线条1", "points": 132.5},
  {"date": "2016-02-25", "name": "线条1", "points": 128.08},
  {"date": "2016-02-26", "name": "线条1", "points": 122},
  {"date": "2016-02-29", "name": "线条1", "points": 122},
  {"date": "2016-03-01", "name": "线条1", "points": 123.449},
  {"date": "2016-03-02", "name": "线条1", "points": double.nan},
  {"date": "2016-03-03", "name": "线条1", "points": 132},
  {"date": "2016-03-04", "name": "线条1", "points": 135},
  {"date": "2016-03-07", "name": "线条1", "points": 123.905},
  {"date": "2016-03-08", "name": "线条1", "points": 125.155},
  {"date": "2016-03-09", "name": "线条1", "points": 126},
  {"date": "2016-03-10", "name": "线条1", "points": 126.778},
  {"date": "2016-03-11", "name": "线条1", "points": 129.656},
  {"date": "2016-03-14", "name": "线条1", "points": 127.64},
  {"date": "2016-03-15", "name": "线条1", "points": 124.786},
  {"date": "2016-03-16", "name": "线条1", "points": 124.469},
  {"date": "2016-03-17", "name": "线条1", "points": 123.5},
  {"date": "2016-03-18", "name": "线条1", "points": 124.061},
  {"date": "2016-03-21", "name": "线条1", "points": 123.5},
  {"date": "2016-03-22", "name": "线条1", "points": 129.002},
  {"date": "2016-03-23", "name": "线条1", "points": 129},
  {"date": "2016-03-24", "name": "线条1", "points": 131.31},
  {"date": "2016-03-29", "name": "线条1", "points": 133},
  {"date": "2016-03-30", "name": "线条1", "points": 129.298},
  {"date": "2016-03-31", "name": "线条1", "points": 127.4},
  {"date": "2016-04-01", "name": "线条1", "points": 122.376},
  {"date": "2016-04-04", "name": "线条1", "points": 119.467},
  {"date": "2016-04-05", "name": "线条1", "points": 120.695},
  {"date": "2016-04-06", "name": "线条1", "points": 118.725},
  {"date": "2016-04-07", "name": "线条1", "points": 127.539},
  {"date": "2016-04-08", "name": "线条1", "points": 129.8},
  {"date": "2016-04-11", "name": "线条1", "points": 129.5},
  {"date": "2016-04-12", "name": "线条1", "points": 134.465},
  {"date": "2016-04-13", "name": "线条1", "points": 133},
  {"date": "2016-04-14", "name": "线条1", "points": 137.35},
  {"date": "2016-04-15", "name": "线条1", "points": 137.2},
  {"date": "2016-04-18", "name": "线条1", "points": 132.611},
  {"date": "2016-04-19", "name": "线条1", "points": 135.479},
  {"date": "2016-04-20", "name": "线条1", "points": 139.05},
  {"date": "2016-04-21", "name": "线条1", "points": 142},
  {"date": "2016-04-22", "name": "线条1", "points": 135.761},
  {"date": "2016-04-25", "name": "线条1", "points": 136.174},
  {"date": "2016-04-26", "name": "线条1", "points": 134.782},
  {"date": "2016-04-27", "name": "线条1", "points": 128},
  {"date": "2016-04-28", "name": "线条1", "points": 121.5},
  {"date": "2016-04-29", "name": "线条1", "points": 120},
  {"date": "2016-05-02", "name": "线条1", "points": 123.966},
  {"date": "2016-05-03", "name": "线条1", "points": 122.538},
  {"date": "2016-05-04", "name": "线条1", "points": 120},
  {"date": "2016-05-05", "name": "线条1", "points": 120.21},
  {"date": "2016-05-06", "name": "线条1", "points": 121.01},
  {"date": "2016-05-09", "name": "线条1", "points": double.nan},
  {"date": "2016-05-10", "name": "线条1", "points": 120.622},
  {"date": "2016-05-11", "name": "线条1", "points": 123.85},
  {"date": "2016-05-12", "name": "线条1", "points": 122.963},
  {"date": "2016-05-13", "name": "线条1", "points": 126},
  {"date": "2016-05-17", "name": "线条1", "points": 130},
  {"date": "2016-05-18", "name": "线条1", "points": 128.845},
  {"date": "2016-05-19", "name": "线条1", "points": 130.17},
  {"date": "2016-05-20", "name": "线条1", "points": 129.741},
  {"date": "2016-05-23", "name": "线条1", "points": 129.668},
  {"date": "2016-05-24", "name": "线条1", "points": 126.886},
  {"date": "2016-05-25", "name": "线条1", "points": 128.239},
  {"date": "2016-05-26", "name": "线条1", "points": 127.239},
  {"date": "2016-05-27", "name": "线条1", "points": 127.457},
  {"date": "2016-05-30", "name": "线条1", "points": 127.37},
  {"date": "2016-05-31", "name": "线条1", "points": 130.756},
  {"date": "2016-06-01", "name": "线条1", "points": 133.232},
  {"date": "2016-06-02", "name": "线条1", "points": 126.47},
  {"date": "2016-06-03", "name": "线条1", "points": 126.385},
  {"date": "2016-06-06", "name": "线条1", "points": 128.331},
  {"date": "2016-06-07", "name": "线条1", "points": 130.914},
  {"date": "2016-06-08", "name": "线条1", "points": 133},
  {"date": "2016-06-09", "name": "线条1", "points": 133.041},
  {"date": "2016-06-10", "name": "线条1", "points": 133.041},
  {"date": "2016-06-13", "name": "线条1", "points": 129},
  {"date": "2016-06-14", "name": "线条1", "points": 129.166},
  {"date": "2016-06-15", "name": "线条1", "points": 124.687},
  {"date": "2016-06-16", "name": "线条1", "points": 122.77},
  {"date": "2016-06-17", "name": "线条1", "points": 126.461},
  {"date": "2016-06-20", "name": "线条1", "points": 127},
  {"date": "2016-06-21", "name": "线条1", "points": 125.594},
  {"date": "2016-06-22", "name": "线条1", "points": 127.438},
  {"date": "2016-06-23", "name": "线条1", "points": 124.44},
  {"date": "2016-06-24", "name": "线条1", "points": 122.131},
  {"date": "2016-06-27", "name": "线条1", "points": 120.53},
  {"date": "2016-06-28", "name": "线条1", "points": 120.296},
  {"date": "2016-06-29", "name": "线条1", "points": 125.877},
  {"date": "2016-06-30", "name": "线条1", "points": 126.404},
];
麻辣翅尖
关注
  • 9
    点赞
  • 踩
  • 13
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
千相千面图形语法
entronad的博客
11-15 1064
在 Flutter 可视化库 Graphic 的新版本中，优化了声明式定义的语法，使其更好的体现图形语法的本质。 本文通过 Graphic 的图形语法定义变换，一步步将柱状图演变为饼图，展示图形语法的灵活丰富。同时也让初学者了解图形语法基本概念。 如果你从未接触过图形语法，不影响本文的阅读。本文可以看作 Graphic 的入门教程。 柱状图和饼图都是数据可视化中常见的类型，它们乍一看迥异，但在图形语法中，却有着相同的本质，这是为什么？让我们从柱状图一步步变换成饼图，来了解其中的缘由。 首先从最常.
[Graphic 开发笔记] 4. 可交互 Flutter 图表
entronad的博客
11-02 1042
在数据可视化中，交互是很重要的。Flutter 图表库 Graphic 拥有一套精心设计的交互系统，以应对各种各样的可交互图表。
Flutter charts_flutter 柱形图无法移动
qq_38162592的博客
10-19 651
原因：在charts.BarChart加载前，图表数据长度为0，增加长度判断即可：list.length<=0?Text("null"):charts.BarChart
Flutter 中的 Tooltip 小部件：全面指南
最新发布
smileKH的博客
05-20 744
Tooltip是 Flutter 的 Material 组件库中的一个 widget，它提供了一种标准的方式来显示提示信息。当用户将鼠标悬停在或长按某个元素上时，Tooltip会显示一段简短的、相关的辅助文本。TooltipTooltip(padding: EdgeInsets.symmetric(horizontal: 16.0, vertical: 8.0), // 自定义内边距margin: EdgeInsets.all(8.0), // 自定义外边距。
【Flutter】graphic图表的快速上手
weixin_52418790的博客
11-24 1374
Graphic是一个数据可视化语法和Flutter图表库。官方github示例我的gitee示例网上可用资源很少，只有作者的几篇文章，并且没有特别详细的文档，使用的话还是需要一定的时间去调研，在此简单记录。
Graphic：基于图形语法的 Flutter 可视化库
entronad的博客
09-16 2688
本文介绍了一个基于图形语法（Grammar of Graphics）的 Flutter 可视化库：Grapphic Repository pub.dev 背景 数据可视化是应用开发中很常见但很重要的需求，一个好的可视化库能让数据可视化的开发事半功倍。可惜的是，目前在 Flutter 社区中，还没有一个完美的可视化库。目前的 Flutter 可视化库都存在一些不尽如人意的地方，例如： charts_flutter 由 Google 内部开发，代码质量很高。但是它提供的图表种类很少，仅有最常见.
Flutter图表库graphic,自定义TooltipGuide
盼盼的博客
07-25 995
Flutter图表库graphic,自定义TooltipGuide
Echarts图表之柱状图
gly_technology的博客
01-18 430
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>Echarts图表</title> <!-- 引入echarts.min.js --> <script src="https://cdn.staticfile.org/echarts/4.3.0/echarts.min....
flutter 图表插件之fl_chart
徐代龙的技术专栏
10-25 7148
前言： 之前很少接触图表功能，以为图表这种功能只能在H5上才能发挥得淋漓尽致，可谁曾料想，早有大神先把强大的chart图表功能给移植到flutter端上了，而且两端都可适用，下面给出网址： pub上： https://pub.dev/packages/fl_chart github上： https://github.com/imaNNeoFighT/fl_chart 部分效果如下： 附：在demo中跑不起来都项目都是耍流氓，建议先将demo跑起来，然后再根据自己的具体情况来使用。 更多： 如何写一个自己的
Flutter自定义TabBar的Indicator.zip
03-02
Flutter自定义TabBar的Indicator 实现秒杀Tab效果
Flutter开发之Widget自定义总结
01-05
这时就需要我们去自定义widget，从Flutter构建、布局、绘制三部曲中我们了解到，实际的测量、布局、绘制操作都在RenderObject中，我们是可以进行继承相关的RenderObject来实现自定义的。但是其实flutter框架在设计之...
Flutter之自定义Dialog实现版本更新弹窗功能的实现
08-18
今天我们就来介绍如何使用Flutter实现自定义Dialog来实现版本更新弹窗功能。 首先，我们需要了解什么是Dialog。在Flutter中，Dialog是一个用来在当前页面上显示一些信息的组件。我们可以使用Dialog来显示警告信息、...
Flutter 通过Clipper实现各种自定义形状的示例代码
08-25
在 Flutter 中，实现自定义形状的组件是非常重要的，Clipper 是其中的一种方法。Clipper 是一个抽象类，提供了一个 clip 方法，用于裁剪子组件的形状。通过继承 CustomClipper 类，可以实现各种自定义形状的裁剪。 ...
Flutter 自定义AppBar实现滚动渐变
01-22
Flutter 自定义AppBar实现滚动渐变
一行代码解决Flutter fl_chart库触摸线条提示和页面左右滑动冲突
bawomingtian123的专栏
09-19 464
现在项目中多个Tab页面放置了图表控件，图表支持触摸弹出线条指引提示，在实际项目接入过程中测试发现，长按线条时，左右滑动指引提示，Tab不跟随滑动，但是当触摸时间不长，刚出现线条指引时立刻左右滑动页面，线条指引消失了，页面也变成了Tab左右滑动了，达不到想要的交互需求。我们可以看到该长按识别器，支持duration自定义，我们完全可以控制这个时间让它在很短时间内进入长按识别，进而可以一直捕获到手势，不至于滑动时执行onCancel。现在转变思想，当触摸时间比较短时，让长按识别器捕获手势即可。
Flutter 给组件以提示的Tooltip
Leove的专栏
07-08 732
当某个组件外边封装有Tooltip时，点击这个组件或鼠标放上后，会有提示信息。 有的组件本身带有tooltip属性。 /// Flutter code sample for Tooltip // This example show a basic [Tooltip] which has a [Text] as child. // [message] contains your label to be shown by the tooltip when // the child that Toolti
Flutter中的提示工具
坚果的博客
10-13 1218
当用户将鼠标悬停、点击或聚焦在某个元素上时，工具提示会显示一条信息性消息。
第三章 分支结构
qq_45790949的博客
11-16 129
1.关系运算符:表达结果是一个逻辑值”真”或”假”，通常用0表示假，1表示真。 2.逻辑运算符:C++提供了&& (逻辑与)、||(逻辑或)和! (逻辑非)三种逻辑运算符。 其中,&&和II是双目运算符,而!是单目运算符。 3.字符可以按照ASCII码值来比较大小，英文字母有小写和大写两种，例如x>='a'&&x<='Z' 4.例...
flutter graphic
10-27
Flutter Graphic是Flutter框架中一个用于处理图形和绘图的库。它提供了一套丰富的工具和组件，用于绘制各种图形、处理图像、实现动画和创建用户界面。 在Flutter中，图形是由一系列的绘图指令和属性组成的。Flutter Graphic库提供了一系列的绘图指令，包括绘制线条、矩形、圆形、椭圆、路径等，可以灵活地定制各种形状的图形。 此外，Flutter Graphic还提供了一系列的图像处理工具，可以进行图像的缩放、旋转、裁剪等操作。它还支持图片的滤镜效果，可以实现一些特殊的视觉效果。 动画在移动应用开发中是非常重要的一部分，Flutter Graphic提供了丰富的动画组件和函数。我们可以使用动画控制器来控制动画的播放速度、持续时间等属性，也可以使用渐变、缩放、旋转等动画效果来让界面更加生动和吸引人。 最重要的是，Flutter Graphic可以与Flutter的UI框架完美融合。我们可以使用Flutter Graphic来创建自定义的UI元素，将其嵌入到界面中，并与其他组件进行交互和动画效果的组合。 综上所述，Flutter Graphic提供了丰富的绘图、图像处理和动画功能，为开发者提供了丰富的工具和组件，帮助我们创建独特、生动的用户界面。通过Flutter Graphic库，开发者可以轻松地实现各种图形和动画效果，提升应用的用户体验。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

麻辣翅尖

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值