在 flutter 几秒钟后在绘图中添加一条线答案

【问题标题】：Adding a line to the drawing after a few seconds in flutter在 flutter 几秒钟后在绘图中添加一条线
【发布时间】：2022-11-30 19:39:42
【问题描述】：

我们想在我们之前使用 customPaint 的 paint 函数绘制的图形中添加一条线。将显示以下绘图：

enter image description here

我们想在几秒钟后将绘图更改为以下绘图：

enter image description here

这意味着将在原始图形中添加一条短线。用户将选择他在图纸更改之前看到的图纸。我们试图用 flutter timer 和 flutter future.dleay 来解决这个问题，但是在我们设置的时间之后没有任何反应，调试器控制台显示：“未处理的异常：对象已被处置”。我们很高兴知道是否有其他选项可以帮助我们实现目标：不同的计时功能、另一个与计时器或 future.delay 一起使用的绘图选项我们试图用这个函数来解决我们的问题：

void paint(Canvas canvas, Size size){
const p1 = Offset(50, 50);
const p2 = Offset(50, 300);
const p3 = Offset(50, 50);
const p4 = Offset(250, 50);
const p5 = Offset(250, 50);
const p6 = Offset(250, 150);
const p7 = Offset(250, 150);
const p8 = Offset(250, 300);
final paint = Paint()
        ..color = Colors.black
       ..strokeWidth = 4
       ..strokeCap = StrokeCap.round;
canvas.drawLine(p1, p2, paint);
canvas.drawLine(p3, p4, paint);
canvas.drawLine(p5, p6, paint);
Timer(
      Duration(seconds: 1),
      () {
        canvas.drawLine(p7, p8, paint);
      },
    );'

此部分位于下面函数的下一行

【问题讨论】：

标签： flutter timer delay paint ticker

【解决方案1】：

自定义画家的实现方式不允许在画布对象上进行任何异步调用，因为画布对象已被销毁，并且绘画函数由新的画布对象提供，因此会显示旧画布对象已被销毁的错误消息。

您可以通过在堆栈中使用两个自定义画家并向第二个画家添加延迟来轻松实现这种延迟绘制。

class DelayedDraw extends StatefulWidget {
  final Size size;

  const DelayedDraw({ super.key, required this.size });

  @override
  State< DelayedDraw > createState() => _ DelayedDraw State();
}

class _ DelayedDraw State extends State<DelayedDraw > {
  bool drawSecond = false;

  @override
  void initState() {
      super.initState();
      WidgetsBinding.instance!.addPostFrameCallback((_) => 
         Future.delayed(const Duration(seconds: 1))
             .then((_) => setState(() => showSecond = true))
      );
  }

  @override
  Widget build(BuildContext context) {
    return Stack(
        children: [
            CustomPaint(
                painter: BaseShapePainter(),
                size: widget.size,
            ),
            if(drawSecond) 
                CustomPaint(
                    painter: SecondShapePainter(),
                    size: widget.size,
                ),
        ],
    );
  }
}

【讨论】：