Flutter Shimmer闪烁效果正常，但结束后图片无法显示求助

你的问题核心在于Shimmer持续处于激活状态，一直覆盖在图片上层，同时外层Container的白色背景也可能干扰图片显示层级。下面是具体的修复方案：

问题分析 #

代码里enabled: true会让Shimmer动画持续运行，不会自动停止，导致加载完成的图片始终被Shimmer效果遮挡；另外，包裹图片的Container设置了白色背景，也可能在视觉上掩盖图片。

修复方案 #

通过状态变量控制Shimmer的激活状态，加载完成后关闭Shimmer，同时优化Widget结构避免遮挡：

方案1：监听图片实际加载状态（推荐） #

使用Image的frameBuilder监听图片加载完成事件，动态切换Shimmer的enabled状态：

class ShimmerImageWidget extends StatefulWidget {
  const ShimmerImageWidget({super.key});

  @override
  State<ShimmerImageWidget> createState() => _ShimmerImageWidgetState();
}

class _ShimmerImageWidgetState extends State<ShimmerImageWidget> {
  bool _isLoading = true;

  @override
  Widget build(BuildContext context) {
    return ClipRRect(
      // 用ClipRRect实现圆角，替代原Container的背景设置
      borderRadius: const BorderRadius.only(
        topLeft: Radius.circular(30),
        bottomRight: Radius.circular(30),
      ),
      child: Shimmer.fromColors(
        baseColor: Colors.grey.shade300,
        highlightColor: Colors.grey.shade100,
        enabled: _isLoading,
        child: Image.asset(
          'assets/hinas3.png',
          fit: BoxFit.cover,
          frameBuilder: (context, child, frame, wasSynchronouslyLoaded) {
            // 图片加载完成时更新状态
            if (frame != null || wasSynchronouslyLoaded) {
              if (mounted) {
                setState(() => _isLoading = false);
              }
              return child;
            }
            return const SizedBox.shrink();
          },
        ),
      ),
    );
  }
}

方案2：加载占位切换逻辑 #

直接在加载状态显示Shimmer占位容器，加载完成后替换为图片，逻辑更直观：

class ShimmerImageWidget extends StatefulWidget {
  const ShimmerImageWidget({super.key});

  @override
  State<ShimmerImageWidget> createState() => _ShimmerImageWidgetState();
}

class _ShimmerImageWidgetState extends State<ShimmerImageWidget> {
  bool _isLoading = true;

  @override
  void initState() {
    super.initState();
    // 模拟网络/本地资源加载延迟，实际项目中可替换为真实加载逻辑
    Future.delayed(const Duration(seconds: 3), () {
      if (mounted) setState(() => _isLoading = false);
    });
  }

  @override
  Widget build(BuildContext context) {
    return ClipRRect(
      borderRadius: const BorderRadius.only(
        topLeft: Radius.circular(30),
        bottomRight: Radius.circular(30),
      ),
      child: _isLoading
          ? Shimmer.fromColors(
              baseColor: Colors.grey.shade300,
              highlightColor: Colors.grey.shade100,
              enabled: true,
              child: Container(color: Colors.grey.shade300),
            )
          : Image.asset(
              'assets/hinas3.png',
              fit: BoxFit.cover,
            ),
    );
  }
}

关键修改点 #

1. 移除了原代码中遮挡图片的白色背景Container，改用ClipRRect实现圆角效果
2. 通过状态变量_isLoading控制Shimmer的enabled状态，加载完成后关闭动画
3. 两种方案分别适配了真实图片加载监听和模拟加载场景，可根据项目需求选择

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