Flutter中NestedScrollView多标签页滚动状态同步问题如何解决

TabBarView 下的各标签页可滚动组件默认共用相同的滚动状态存储标识，且会继承 NestedScrollView 传递的父级滚动控制器，导致滚动操作时多个页面偏移量同步更新。

• 第一步：为每个标签页内部的根可滚动组件（ListView、GridView、CustomScrollView 等）分配唯一的 PageStorageKey，隔离各自的滚动状态存储。
  示例（以 EducationScreen 为例，其余页面依次修改即可）：

  // EducationScreen 内部的根滚动组件添加唯一key
  ListView(
    key: const PageStorageKey('education_tab'),
    // 其余原有配置保持不变
  )
  

  5个标签页的 key 值需唯一，可分别命名为 famille_tab、sports_tab、infos_tab、politique_tab 对应剩余页面。
• 第二步：给每个子页面的可滚动组件添加 primary: false 配置，禁止其继承父级 NestedScrollView 的主滚动控制器，使用独立的滚动控制器处理自身滚动事件。
  示例：

  ListView(
    key: const PageStorageKey('education_tab'),
    primary: false,
    // 其余原有配置保持不变
  )
  

如果切换标签页时希望保留页面状态不被销毁重建，可以给每个标签页对应组件混入 AutomaticKeepAliveClientMixin，避免页面销毁导致滚动状态重置：

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

  @override
  State<EducationScreen> createState() => _EducationScreenState();
}

class _EducationScreenState extends State<EducationScreen> with AutomaticKeepAliveClientMixin {
  @override
  bool get wantKeepAlive => true; // 开启保活

  @override
  Widget build(BuildContext context) {
    super.build(context); // 必须调用父类方法
    // 原有页面构建逻辑
  }
}

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