Flutter TabBarView使用Key后仍无法保留CustomScrollView滚动位置如何解决

解决方案 #

核心原因排查

之前的方案无效本质是三个问题：

1. PageStorageKey绑定层级错误，没有直接作用到需要保存滚动位置的CustomScrollView组件上
2. Stacked的ViewModelBuilder默认会在状态更新时重建子组件，导致滚动状态丢失
3. 部分AutomaticKeepAliveClientMixin实现不完整，保活逻辑未生效

具体修改步骤

1. 补全AutomaticKeepAliveClientMixin实现
   每个Tab页的State类必须完整实现保活逻辑，示例如下：

   class _ExtensionsViewState extends State<ExtensionsView> with AutomaticKeepAliveClientMixin {
     // 必须重写该属性返回true
     @override
     bool get wantKeepAlive => true;
   
     @override
     Widget build(BuildContext context) {
       // 必须调用super.build，否则保活不生效
       super.build(context);
       // 原有build逻辑
     }
   }
   

2. 修正PageStorageKey绑定位置
   直接将唯一的PageStorageKey绑定到CustomScrollView上，不要绑定到父容器再透传，避免中间组件吞掉key属性，同时将滚动组件作为ViewModelBuilder的child参数传入，避免状态更新时重建滚动组件，修改后的Tab页代码如下：

   return ViewModelBuilder<ExtensionsViewModel>.reactive(
     viewModelBuilder: () => ExtensionsViewModel(),
     onModelReady: (model) => model.fetchData(),
     child: CustomScrollView(
       // 直接绑定唯一的PageStorageKey
       key: const PageStorageKey('extensions_view_scroll'),
       slivers: [
         if (model.isBusy)
           SliverList(
             delegate: SliverChildBuilderDelegate(
               (context, index) {
                 return FilledVideoCard.loading(
                   borderRadius: BorderRadius.zero,
                 );
               },
               childCount: 3,
             ),
           )
         else
           SliverList(
             delegate: SliverChildBuilderDelegate(
               (context, index) {
                 final data = model.extensions[index];
                 return FilledVideoCard(
                   key: ObjectKey(data),
                   title: data.title,
                   price: data.price,
                   date: data.date,
                   image: data.image,
                   tags: [data.version, ...data.tags],
                   borderRadius: BorderRadius.zero,
                   onTap: () {},
                 );
               },
               childCount: model.extensions.length,
             ),
           ),
       ],
     ),
     builder: (context, model, child) => child!,
   );
   

3. 简化首页PageStorage配置
   首页代码中不需要手动包裹PageStorage容器、也不需要自定义_bucket，直接使用根节点自带的PageStorageBucket即可，修改后的TabBarView配置：

   body: TabBarView(
     children: const [
       ExtensionsView(),
       VideosView(),
       SettingsView(),
     ],
   )
   

效果验证

修改完成后可同时满足两个需求：

• Tab切换时各页面滚动位置独立保存，不会出现联动问题
• 滚动时SliverAppBar的floating、snap、pinned动画效果正常，不会失效

内容的提问来源于stack exchange，提问作者Zain Ul Hassan