Flutter中调用setState后FutureBuilder未更新的问题如何解决

• _userProfile 是定义在build方法内的局部变量，你在onPressed的setState中对它的赋值会在build重新执行时被覆盖，等于这次赋值完全无效
• FutureBuilder 只会在接收到新的Future实例时才会重新执行异步逻辑、刷新快照，复用同一个Future实例时会直接返回旧的快照结果，不会重新拉取数据
• updatePhotoURL 是包含ImagePicker选图、上传/更新逻辑的异步方法，你当前是同步调用，还没等头像URL实际更新完成就提前调用了getUserProfile()，拿到的必然是旧的用户数据
• 若头像更新后URL没有变化只是资源内容更新，NetworkImage的默认缓存机制也会导致加载到旧图片

1. 将_userProfile改为State类的成员变量，不在build方法内重复初始化
2. 给updatePhotoURL调用加await，等待头像URL更新完成后再重新获取用户信息
3. 若存在同URL资源更新的场景，给NetworkImage追加时间戳参数清理缓存

修复后完整代码如下：

class UserHeader extends StatefulWidget {
  @override
  _UserHeaderState createState() => _UserHeaderState();
}

class _UserHeaderState extends State<UserHeader> {
  // 把userProfile改为State成员变量
  late Future<UserProfile> _userProfile;

  @override
  void initState() {
    super.initState();
    // 初始化只执行一次，不要在build里重复获取
    _userProfile = context.read<DataProvider>().getUserProfile();
  }

  @override
  Widget build(BuildContext context) {
    var _dataProvider = context.watch<DataProvider>();

    return FutureBuilder<UserProfile>(
      future: _userProfile,
      builder: (context, snapshot) {
        Widget body = const Center(child: SizedBox.shrink());

        if (snapshot.hasError) {
          print(snapshot.error);
          body = Center(child: ErrorPage(context));
        } else if (!snapshot.hasData) {
          body = const Center(child: CircularProgressIndicator());
        } else {
          body = Padding(
            padding: const EdgeInsets.all(16),
            child: Row(
              children: [
                CircleAvatar(
                  // 同URL更新时可加?t=时间戳清缓存：NetworkImage("${snapshot.data!.photoURL}?t=${DateTime.now().millisecondsSinceEpoch}")
                  backgroundImage: NetworkImage(snapshot.data!.photoURL),
                  radius: 40,
                  child: Stack(
                    children: [
                      Align(
                        alignment: Alignment.bottomRight,
                        child: RawMaterialButton(
                          elevation: 1.0,
                          fillColor: Colors.grey[800],
                          child: const Icon(Icons.add_a_photo_rounded, size: 16),
                          shape: const CircleBorder(),
                          materialTapTargetSize: MaterialTapTargetSize.shrinkWrap,
                          padding: const EdgeInsets.all(6),
                          constraints: const BoxConstraints(minWidth: 0),
                          // 改为异步回调
                          onPressed: () async {
                            print('update photo button pressed');
                            // 等待更新逻辑执行完成
                            await _dataProvider.updatePhotoURL();
                            // 赋值新的Future实例，触发FutureBuilder刷新
                            setState(() {
                              _userProfile = _dataProvider.getUserProfile();
                            });
                          },
                        ),
                      )
                    ]
                  ),
                ),
              ],
            ),
          );
        }
        return body;
      }
    );
  }
}

• 可以在DataProvider的updatePhotoURL方法执行完成后直接调用notifyListeners，配合watch自动刷新，不用手动触发setState更新Future
• 若头像上传耗时较长，可以在点击按钮后先展示本地选中的图片占位，不用等远程数据更新完成再刷新UI

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