Flutter如何点击主页面保存按钮一次性保存全部3个Tab页的数据

当然存在可落地的实现方案，根据项目复杂度可以选择以下几种不同的实现方式：

方案1：父级状态托管（最简单，无额外依赖） #

最适合小型项目，不需要引入第三方库：

• 首先定义统一的个人资料数据类，封装3个Tab页所有需要存储的字段

class ProfileData {
  // Tab1（基础资料）字段
  String nickname = '';
  String avatar = '';
  int age = 0;

  // Tab2（社交信息）字段
  String wechatId = '';
  String githubUrl = '';

  // Tab3（偏好设置）字段
  bool enableNotify = true;
  bool darkMode = false;
}

• 在主页面（带AppBar和TabBar的父页面）初始化ProfileData实例，同时定义数据更新回调方法，将回调作为参数传递给3个子Tab页
• 每个子Tab页的输入内容发生变化时，直接调用传入的回调，实时更新父页面持有的ProfileData实例数据
• 点击顶部保存按钮时，父页面直接读取已经同步完成的ProfileData实例，执行提交保存逻辑即可

方案2：GlobalKey获取子页面状态（适合轻量场景） #

如果不想做实时数据同步，只需要在保存时一次性读取3个页面的数据，可以用该方案：

• 给每个子Tab页的State类定义公开的getCurrentData()方法，返回当前页面的所有填写数据
• 在父页面为3个子Tab分别创建对应的GlobalKey实例：

final tab1Key = GlobalKey<Tab1PageState>();
final tab2Key = GlobalKey<Tab2PageState>();
final tab3Key = GlobalKey<Tab3PageState>();

• 构建子Tab页时将对应GlobalKey传递给子组件
• 点击保存按钮时，依次调用三个GlobalKey的currentState?.getCurrentData()方法，拿到所有页面数据后合并提交即可

注意：使用该方案需要给子Tab页混入AutomaticKeepAliveClientMixin，防止Tab切换时不可见的页面被销毁，导致无法通过key获取状态

方案3：状态管理库托管（适合中大型项目） #

如果项目已经引入Provider、Riverpod、Bloc等状态管理工具，可以直接用现有能力实现：

• 创建独立的Profile状态类，托管3个Tab的所有数据和更新逻辑
• 三个子Tab页输入变化时，直接更新状态类中的对应字段
• 主页面的保存按钮直接读取状态类中的全量数据提交即可，耦合度更低，扩展性更好

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