Flutter中Image.network加载时避免bool值重复赋值的解决方案

问题原因 #

loadingBuilder里的loadingProgress == null会触发两次：一次是图片直接命中缓存（无需网络加载），另一次是网络加载完成。你需要的是仅在图片加载完成时执行一次赋值操作。

解决方案：添加本地状态锁避免重复执行 #

步骤1：在State类中添加状态变量 #

在当前组件的State类中，新增一个布尔变量用于标记是否已经执行过赋值操作：

bool _hasTriggeredFetched = false;

步骤2：修改loadingBuilder逻辑 #

在loadingProgress == null的分支中，先判断是否已经触发过赋值，仅在未触发时执行操作；同时在加载过程中重置标记，确保后续如果加载中断重试能正常触发：

child: Image.network(
  _db.image.path,
  loadingBuilder: (BuildContext context, Widget child, ImageChunkEvent loadingProgress) {
    if (loadingProgress == null) {
      // 仅在未执行过的情况下设置isFetched
      if (!_hasTriggeredFetched) {
        widget.isFetched = true;
        print('fetched');
        _hasTriggeredFetched = true;
      }
      return Container(
        width: 200,
        child: child,
      );
    }
    // 加载过程中重置标记，确保重新加载时能再次触发
    _hasTriggeredFetched = false;
    return Container(
      width: 200,
      height: 200,
      child: Center(
        child: CircularProgressIndicator(
          value: loadingProgress.expectedTotalBytes != null
              ? loadingProgress.cumulativeBytesLoaded / loadingProgress.expectedTotalBytes
              : null,
        ),
      ),
    );
  },
),

额外建议：遵循Flutter状态管理规范 #

直接修改widget.isFetched不符合Flutter单向数据流的设计，建议通过回调函数通知父组件更新状态：

1. 父组件传递回调：

ParentWidget(
  // ...
  onImageFetched: () {
    setState(() {
      _isFetched = true;
    });
  },
)

2. 子组件中调用回调：

if (!_hasTriggeredFetched) {
  widget.onImageFetched();
  _hasTriggeredFetched = true;
}

这样可以避免直接修改父组件传递的属性，让状态流转更清晰可控。

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