Flutter中如何实现两张本地图片资源同步加载、同时显示？

针对两张本地图片加载不同步的问题，可以通过预加载图片的方式确保它们同时渲染，以下是两种可行方案：

方法一：在初始化阶段预加载后渲染 #

在Widget的初始化生命周期中提前加载两张图片，等待全部加载完成后再显示布局：

class _YourWidgetState extends State<YourWidget> {
  bool _imagesReady = false;
  final double size = 40; // 自定义尺寸
  int giftCount = 1; // 自定义giftCount值

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

  Future<void> _preloadImages() async {
    // 并行预加载两张图片
    await Future.wait([
      precacheImage(AssetImage('assets/images/ic_x.png'), context),
      precacheImage(AssetImage('assets/images/ic_$giftCount.png'), context),
    ]);
    // 加载完成后更新状态，触发布局渲染
    setState(() => _imagesReady = true);
  }

  @override
  Widget build(BuildContext context) {
    return _imagesReady
        ? Row(
            mainAxisAlignment: MainAxisAlignment.center,
            children: [
              Image.asset('assets/images/ic_x.png', height: size),
              Image.asset('assets/images/ic_$giftCount.png', height: size),
            ],
          )
        : SizedBox.shrink(); // 加载中可替换为CircularProgressIndicator()
  }
}

方法二：用FutureBuilder异步监听加载状态 #

直接在build方法中通过FutureBuilder监听两张图片的预加载进度，完成后再渲染图片：

Widget build(BuildContext context) {
  final double size = 40;
  int giftCount = 1;

  return FutureBuilder(
    future: Future.wait([
      precacheImage(AssetImage('assets/images/ic_x.png'), context),
      precacheImage(AssetImage('assets/images/ic_$giftCount.png'), context),
    ]),
    builder: (context, snapshot) {
      if (snapshot.connectionState == ConnectionState.done) {
        return Row(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            Image.asset('assets/images/ic_x.png', height: size),
            Image.asset('assets/images/ic_$giftCount.png', height: size),
          ],
        );
      }
      // 加载过程中可显示加载动画
      return CircularProgressIndicator();
    },
  );
}

说明 #

• precacheImage会将图片提前缓存到内存，后续Image.asset会直接读取缓存资源，避免先后加载的差异。
• 加载过程中的占位Widget可根据需求替换，比如空白容器、加载指示器等。

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