Flutter中显示CircularProgressBar时控制PageView滚动的方法

我理解你的痛点——不想因为控制滚动状态而触发整个组件的重建，这确实会影响性能，尤其是你有100个页面的PageView。这里有一个优雅的解决方案，不需要全局setState就能实现加载时禁止滚动：

核心思路 #

用ValueNotifier来跟踪加载状态，配合ValueListenableBuilder局部更新PageView的滚动物理属性。这样只有滚动逻辑会被更新，不会触发整个父组件的重建。

具体实现步骤 #

1. 创建加载状态的ValueNotifier
   定义一个轻量级的状态管理器，它只会在值变化时通知监听者，不会触发全局重建：

   final ValueNotifier<bool> _isLoading = ValueNotifier(false);
   

2. 绑定API请求的状态切换
   在发起API请求前将_isLoading设为true，请求完成（无论成功或失败）后设为false：

   Future<void> _fetchPageData(int pageIndex) async {
     _isLoading.value = true;
     try {
       // 替换为你的实际API调用逻辑
       final response = await yourApiClient.fetchData(pageIndex);
       // 处理返回的数据
     } catch (e) {
       // 处理请求错误
     } finally {
       _isLoading.value = false;
     }
   }
   

3. 用ValueListenableBuilder包裹PageView
   这个组件会监听_isLoading的变化，仅在状态改变时更新PageView的滚动行为：

   @override
   Widget build(BuildContext context) {
     return ValueListenableBuilder<bool>(
       valueListenable: _isLoading,
       builder: (context, isLoading, child) {
         return PageView.builder(
           controller: _pageController,
           // 加载时禁用滚动，否则使用默认页面滚动物理
           physics: isLoading 
               ? const NeverScrollableScrollPhysics() 
               : const PageScrollPhysics(),
           itemCount: 100,
           onPageChanged: (index) => _fetchPageData(index),
           itemBuilder: (context, index) {
             return FutureBuilder(
               // 注意：缓存每个页面的请求Future，避免重复发起API调用
               future: _getCachedRequest(index),
               builder: (context, snapshot) {
                 if (snapshot.connectionState == ConnectionState.waiting) {
                   return const Center(child: CircularProgressIndicator());
                 } else if (snapshot.hasError) {
                   return const Center(child: Text('加载失败'));
                 } else {
                   // 渲染你的页面内容
                   return PageContent(data: snapshot.data);
                 }
               },
             );
           },
         );
       },
     );
   }
   

4. 优化：缓存页面请求Future
   为了避免PageView重建时重复发起请求，用Map缓存每个页面的请求实例：

   final Map<int, Future> _requestCache = {};
   
   Future _getCachedRequest(int index) {
     if (!_requestCache.containsKey(index)) {
       _requestCache[index] = _fetchPageData(index);
     }
     return _requestCache[index]!;
   }
   

方案优势 #

• 无全局重建：ValueNotifier+ValueListenableBuilder仅更新滚动相关的逻辑，不会触发父组件或其他页面的不必要重建。
• 符合Flutter设计：通过修改physics属性控制滚动，比手动拦截手势更可靠、更贴合组件原生逻辑。
• 轻量高效：不需要引入复杂的状态管理库，仅用Flutter原生组件就能解决问题。

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