Flutter多图拼接屏：如何实现所有资源加载完成后再显示？

核心思路 #

先把所有需要用到的本地assets图、网络图提前加载完毕，等全部加载完成后再渲染完整界面；加载过程中给用户展示明确的加载状态（比如转圈动画），避免看到界面逐步拼凑的过程。

具体实现步骤 #

1. 封装图片预加载工具函数 #

分别处理本地和网络图片的加载逻辑，统一返回Future，方便后续批量等待：

// 预加载单张网络图片
Future<void> preloadNetworkImage(String url) async {
  final image = NetworkImage(url);
  await image.resolve(const ImageConfiguration()).completed;
}

// 预加载单张本地assets图片
Future<void> preloadAssetImage(String assetPath) async {
  final image = AssetImage(assetPath);
  await image.resolve(const ImageConfiguration()).completed;
}

2. 页面初始化时批量预加载所有图片 #

在页面的initState里收集所有要加载的图片，用Future.wait等待全部完成后更新状态，触发完整界面渲染：

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

  @override
  State<MosaicScreen> createState() => _MosaicScreenState();
}

class _MosaicScreenState extends State<MosaicScreen> {
  bool _isAllLoaded = false;
  final List<Future<void>> _preloadTasks = [];

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

  void _startPreload() async {
    // 添加所有需要预加载的图片任务
    _preloadTasks.add(preloadNetworkImage('https://example.com/avatar.jpg'));
    _preloadTasks.add(preloadAssetImage('assets/images/bottom_square.png'));
    // 继续添加其他拼接图...

    // 等待所有图片加载完成
    await Future.wait(_preloadTasks);
    
    // 确保页面未被销毁再更新状态
    if (mounted) {
      setState(() {
        _isAllLoaded = true;
      });
    }
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: _isAllLoaded 
          ? _buildMosaicLayout() // 加载完成展示完整界面
          : const Center(child: CircularProgressIndicator()), // 加载中显示动画
    );
  }

  Widget _buildMosaicLayout() {
    return Column(
      children: [
        CircleAvatar(
          backgroundImage: NetworkImage('https://example.com/avatar.jpg'),
          radius: 40,
        ),
        const SizedBox(height: 20),
        Image.asset('assets/images/bottom_square.png'),
        // 其他拼接组件...
      ],
    );
  }
}

3. 处理加载失败的边界情况 #

如果某张图片加载失败，直接阻塞界面会影响体验，给预加载函数加错误捕获：

Future<void> preloadNetworkImage(String url) async {
  try {
    final image = NetworkImage(url);
    await image.resolve(const ImageConfiguration()).completed;
  } catch (e) {
    debugPrint('网络图加载失败: $url, 错误: $e');
    // 这里可以设置默认图或者跳过，不影响整体加载流程
  }
}

Future<void> preloadAssetImage(String assetPath) async {
  try {
    final image = AssetImage(assetPath);
    await image.resolve(const ImageConfiguration()).completed;
  } catch (e) {
    debugPrint('本地图加载失败: $assetPath, 错误: $e');
  }
}

4. 进阶优化：缓存控制 #

如果担心预加载的图片被快速回收，可以临时调整ImageCache的缓存上限：

void _startPreload() async {
  // 临时把缓存上限调到50MB，避免预加载的图被清理
  PaintingBinding.instance.imageCache.maximumSizeBytes = 1024 * 1024 * 50;

  // ... 预加载任务 ...

  await Future.wait(_preloadTasks);
  
  if (mounted) {
    setState(() {
      _isAllLoaded = true;
    });
  }
}

最佳实践总结 #

• 用Future.wait批量预加载是最直接的方案，确保所有资源就绪后再渲染
• 必须处理加载失败的情况，避免界面无限卡住
• 加载过程中用加载动画/骨架屏替代空白，让用户感知到加载状态
• 本地图预加载能避免首次渲染的闪烁，网络图预加载能消除分批出现的视觉断层

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