Flutter 重新打开AlertDialog时弹窗内部GIF无法二次播放问题

问题根因 #

该问题和GIF资源本身无关，由Flutter图片全局缓存机制导致：GIF首次加载并完成单次播放后，帧序列的终止播放状态会被保留在全局图片缓存中。后续再次打开弹窗加载同路径GIF资源时，会直接复用缓存里的终止状态资源，因此停在最后一帧无法重新播放。

解决方案 #

你可以在弹窗销毁时主动清除对应GIF的缓存，强制下次打开时重新加载解码GIF，即可触发重新播放，同步可以为GIF组件指定唯一Key避免Widget复用异常。

修改后完整代码 #

import 'package:flutter/material.dart';
import 'package:geocash_flutter/services/size_config.dart';

class LoseDialog extends StatefulWidget {
  const LoseDialog({Key key}) : super(key: key);

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

class _LoseDialogState extends State<LoseDialog>{

  @override
  Widget build(BuildContext context) {
    SizeConfig().init(context);

    return WillPopScope(
      onWillPop: () async => false,
      child: AlertDialog(
        content: Column(
          mainAxisSize: MainAxisSize.min,
          children: [
            Image.asset(
              'assets/lose.gif',
              // 加唯一Key强制组件不复用旧的加载状态
              key: UniqueKey(),
              height: 35.0 * SizeConfig.blockSizeVertical,
            ),
          ],
        ),
      ),
    );
  }

  @override
  void dispose() {
    // 弹窗销毁时清除当前GIF的缓存，下次打开强制重新加载
    PaintingBinding.instance.imageCache.evict(const AssetImage('assets/lose.gif'));
    super.dispose();
  }
}

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