如何从飞镖中的异步数据中提取？答案

【问题标题】：How to draw from async data in dart?如何从飞镖中的异步数据中提取？
【发布时间】：2018-08-14 09:20:19
【问题描述】：

我正在尝试读取文件（异步）并返回数据列表。然后，我想在每个给定数字都是线高时使用 CustomPainter 画线（我想画多条线）

class BarChartPainter extends CustomPainter {
  @override
  paint(Canvas canvas, Size size) {
    final paint = new Paint()
      ..color = AppColors.primaryColor
      ..style = PaintingStyle.fill;

    var futurePath = run();

    futurePath.then((height) {
      print('1: $height');
      for (var lineHeight in height) {
        print('2: $lineHeight');
        canvas.drawRect(
            new Rect.fromLTWH(1.0, 10.0, 10.0, lineHeight.toDouble()), paint);
      }
    }).catchError((e) => print(e));
  }

  @override
  bool shouldRepaint(BarChartPainter old) => false;
}

print('1: $height') 返回 [75, 0, 0, 0, 0, 0, 0, 0, 0, 0, 86, 72, 10, 2, 0, 0, 0, 0, 0, (...), 0, 85, 22, 3, 1]

print('2: $lineHeight') 返回 75

drawRect 不起作用。错误是：I/flutter (13751)：对象已被释放。

【问题讨论】：

标签： mobile dart flutter

【解决方案1】：

在绘制框架时，所有数据都需要准备好。在这种情况下使用 Future 意味着数据只有在画布被渲染后才可用。

处理此问题的一种方法是将文件加载移到 CustomPainter 之外，并在加载数据时呈现画家。这是从 JSON 资产文件加载的示例：

class BarChart extends StatefulWidget {
    @override
    createState() => new _BarChartState();
}

class _BarChartState extends State<BarChart> {
    var barHeights = <int>[];

    @override
    initState() {
        super.initState();
        _fetchBarHeights();
    }

    _fetchBarHeights() async {
        final heights = await rootBundle
            .loadStructuredData<List<int>>('assets/barchart.json', (jsonStr) async {
        final jsonList = json.decode(jsonStr);
        return (jsonList as List).map((i) => (i as int)).toList();
        });
        setState(() => barHeights = heights);
    }

    @override
    Widget build(BuildContext context) {
        return new Center(
            child: new CustomPaint(
        painter: new _BarChartPainter(barHeights),
        ));
    }
}

class _BarChartPainter extends CustomPainter {
    _BarChartPainter(this.barHeights);
    final List<int> barHeights;

    @override
    paint(Canvas canvas, Size size) {
        final paint = new Paint()
        ..color = Colors.blue
        ..style = PaintingStyle.fill;

        var pos = 0.0;
        barHeights.forEach((barHeight) {
            canvas.drawRect(
                new Rect.fromLTWH(pos, 10.0, 10.0, barHeight.toDouble()),
                paint,
            );
            pos += 10;
        });
    }

    @override
    bool shouldRepaint(BarChartPainter old) =>
        !(new ListEquality().equals(old.barHeights, barHeights));
    }
}

【讨论】：