Flutter中Canvas绘制/重绘时如何避免部件短暂白屏并保持透明

你遇到的白屏问题主要来自两个核心点：一是每次切换图像时都会重新解码图像，等待过程中显示的加载组件带来了不透明的空白；二是当前的重绘逻辑有问题，导致图像更新不及时，加上FutureBuilder状态切换时的间隙，就出现了短暂白屏。下面给你一步步调整的方案：

1. 核心问题拆解 #

• 每次传入新的imageData都重新调用解码方法，耗时的过程中FutureBuilder会替换成加载组件，如果这个组件没有透明背景，就会出现白屏。
• 现有shouldRepaint返回false，意味着图像或裁剪区域变化时不会触发重绘，既会导致图像不更新，还可能残留旧内容。
• FutureBuilder在状态切换时，旧的绘制组件会被移除，新图像未加载完成前的空白期就是白屏的来源。

2. 修复后的完整代码 #

import 'dart:async';
import 'dart:typed_data';
import 'package:flutter/material.dart';
import 'dart:ui' as ui;

class PartImagePainter extends StatefulWidget {
  final Uint8List imageData;
  final int originalImageWidth;
  final int originalImageHeight;
  final Rect rect;

  const PartImagePainter({
    required this.imageData,
    required this.originalImageWidth,
    required this.originalImageHeight,
    required this.rect,
    super.key,
  });

  @override
  _PartImagePainterState createState() => _PartImagePainterState();
}

class _PartImagePainterState extends State<PartImagePainter> {
  ui.Image? _currentImage;
  Uint8List? _lastImageData;

  Future<void> _loadImage() async {
    // 只有当数据源真正变化时才重新解码，避免重复操作
    if (widget.imageData == _lastImageData) return;

    final codec = await ui.instantiateImageCodec(
      widget.imageData,
      targetWidth: widget.originalImageWidth,
      targetHeight: widget.originalImageHeight,
    );
    final image = (await codec.getNextFrame()).image;

    setState(() {
      _currentImage = image;
      _lastImageData = widget.imageData;
    });
  }

  @override
  void initState() {
    super.initState();
    _loadImage();
  }

  @override
  void didUpdateWidget(covariant PartImagePainter oldWidget) {
    super.didUpdateWidget(oldWidget);
    // 当图像数据或裁剪区域变化时，触发更新逻辑
    if (widget.imageData != oldWidget.imageData || widget.rect != oldWidget.rect) {
      _loadImage();
    }
  }

  @override
  Widget build(BuildContext context) {
    // 始终返回CustomPaint，图像未加载时保持透明，加载完成后自动重绘
    return CustomPaint(
      painter: ImagePainter(_currentImage, widget.rect),
      child: SizedBox(
        width: MediaQuery.of(context).size.width,
        height: widget.rect.height,
      ),
    );
  }
}

class ImagePainter extends CustomPainter {
  final ui.Image? resImage;
  final Rect rectCrop;

  ImagePainter(this.resImage, this.rectCrop);

  @override
  void paint(Canvas canvas, Size size) {
    if (resImage == null) return; // 图像未加载时不绘制，保持画布透明

    final Rect rect = Offset.zero & size;
    final Size imageSize = Size(resImage!.width.toDouble(), resImage!.height.toDouble());
    final FittedSizes sizes = applyBoxFit(BoxFit.fitWidth, imageSize, size);
    final Rect inputSubRect = rectCrop;
    final Rect outputSubRect = Alignment.center.inscribe(sizes.destination, rect);
    canvas.drawImageRect(resImage!, inputSubRect, outputSubRect, Paint());
  }

  @override
  bool shouldRepaint(covariant ImagePainter oldDelegate) {
    // 图像或裁剪区域变化时，触发重绘
    return resImage != oldDelegate.resImage || rectCrop != oldDelegate.rectCrop;
  }
}

关键修改说明 #

• 图像缓存机制：用_currentImage和_lastImageData记录已加载的图像和对应数据源，避免重复解码，减少等待时间。
• 移除FutureBuilder：不再切换组件，始终返回CustomPaint。图像未加载时paint方法直接返回，保持画布透明；新图像加载完成后自动触发重绘，无缝替换旧图像。
• 修正重绘逻辑：shouldRepaint现在会对比新旧图像和裁剪区域，确保参数变化时及时更新画面。
• 监听参数变化：通过didUpdateWidget检测图像数据或裁剪区域的变化，及时触发加载或重绘。

这样调整后，切换图像时旧图像会一直显示到新图像加载完成，完全消除中间的白屏间隙；首次加载时画布也会保持透明，直到图像准备就绪。

内容的提问来源于stack exchange，提问作者JayVDiyk