dart - 如何在使用 canvas.drawLine() 打印多行时添加时间延迟

Question

我正在学习 Flutter/Dart，特别是如何在 Canvas 上绘图。

我想使用 FOR 循环绘制多条线。我想要迭代之间的延迟，以便我看到每条线都单独绘制，一条接一条。

引用这两篇文章:

异步编程: future https://www.dartlang.org/tutorials/language/futures

异步编程:流 https://www.dartlang.org/tutorials/language/streams

我能够编写一个“文本版本”画线器来展示我可以延迟正在运行的 FOR 循环并打印一些文本。

// print 10 lines 'text version'
Future printTenLines() async {
    for (int z = 0; z <= 9; z++) {
      await addDelay();
      print('Line $z');
    }
  }

  main() {
    printTenLines();
  }

  const delayTime = Duration(milliseconds: 1000);

  Future addDelay() => Future.delayed(delayTime);

但是，当我用实际的 canvas.drawLine() 函数替换“文本版本”print() 例程时，出现异常错误。

  const delayTime = Duration(milliseconds: 10);

  Future<String> addDelay() => Future.delayed(delayTime);

  // draw 10 lines on the canvas   
  Future<void> drawTenLines() async {
    for (double i = 0; i <= 100; i += 10) {
      await addDelay();
      print('Line $i');
      canvas.drawLine(
        Offset(size.width/2, size.height/2),
        Offset(i, 0),
        paint,
      );
    }

     drawTenLines();

我发现这个问题类似于尝试打印两个嵌套循环的输出。执行代码，并在外层循环完成时打印两个循环的输出。

我尝试使用嵌套循环绘制线条，外循环绘制线条，内循环充当延迟计时器。程序一直等到两个循环都完成，并且所有的线都被一次绘制。

使用这个异步 Futures 和 Streams 的例子是我最接近实现预期结果的方法。 “文本版”行式打印机被延迟并正常工作。但延迟不适用于 canvas.drawLine()。

这是我的完整代码。它按原样工作并绘制 10 行。取消注释延迟调用以查看异常。我只是想让 Canvas 在绘制下一条线之前延迟一段时间。

`

    import 'package:flutter/material.dart';
    import 'dart:async';

    void main() {
      runApp(MyApp());
    }

    class MyApp extends StatelessWidget {
      @override
      Widget build(BuildContext context) {
        return MaterialApp(
          title: "Drawing Lines",
          home: DrawingPage(),
        );
      }
    }

    class DrawingPage extends StatelessWidget {
      @override
      Widget build(BuildContext context) {
        return Scaffold(
            appBar: AppBar(
              title: Text("Draw Ten Lines"),
            ),
            body: CustomPaint(
              painter: LinePainter(),
              child: Center(
                child: Text(
                  "",
                  style: TextStyle(fontSize: 20, fontStyle: FontStyle.italic),
                ),
              ),
            ));
      }
    }

    class LinePainter extends CustomPainter {
      @override
      void paint(Canvas canvas, Size size) {
        var paint = Paint();
        paint.color = Colors.blue;
        paint.strokeWidth = 1;
        paint.style = PaintingStyle.stroke;

        const delayTime = Duration(milliseconds: 1000);

        Future<void> addDelay() => Future.delayed(delayTime);

        Future<void> drawTenLines() async {
          for (double i = 0; i <= 100; i += 10) {
            //await addDelay();
            print('Line $i');
            canvas.drawLine(
              Offset(size.width / 2, size.height / 2),
              Offset(i, 0),
              paint,
            );
            //await addDelay();
          }
        }

        drawTenLines();
      }

      @override
      bool shouldRepaint(CustomPainter oldDelegate) => true;
    }

`

Answer 1

试试这个方法..

Future.delayed(const Duration(milliseconds: 500), () {

// Here you can write your code

setState(() {
// Here you can write your code for open new view
});

 });

第二种方式..使用定时器

 Timer _timer;
_timer = new Timer(const Duration(milliseconds: 400), () {
  setState(() {

  // Here you can write your code for open new view
  });
});

定时器导入 'dart:async'