Flutter中懒加载列表实现搜索且不缓存数据的方案咨询

针对你不想缓存数据、也不想一次性拉取全量数据的需求，以下是几个实用的实现思路：

方案1：搜索模式独立分页加载 #

核心是维护正常列表和搜索列表两套独立的分页状态，根据当前是否处于搜索模式，切换数据源和分页逻辑：

1. 定义状态变量：

   List<YourModel> normalItems = [];
   List<YourModel> searchItems = [];
   bool isSearching = false;
   int normalCurrentPage = 1;
   int searchCurrentPage = 1;
   String currentSearchQuery = '';
   bool _isLoading = false;
   

2. 搜索触发逻辑：
   当用户在搜索框输入内容时，切换到搜索模式，重置搜索分页，清空搜索结果，发起第一页搜索请求：

   void onSearchQueryChanged(String query) {
     if (query.isEmpty) {
       setState(() {
         isSearching = false;
         currentSearchQuery = '';
       });
       return;
     }
     setState(() {
       isSearching = true;
       currentSearchQuery = query;
       searchCurrentPage = 1;
       searchItems.clear();
       _isLoading = true;
     });
     // 调用搜索接口拉取第一页数据
     fetchSearchData(query, searchCurrentPage).then((data) {
       setState(() {
         searchItems.addAll(data);
         _isLoading = false;
       });
     });
   }
   

3. 滚动加载逻辑：
   通过ScrollController监听滚动到底部事件，根据当前模式加载对应分页的数据：

   void _onScroll() {
     if (_isLoading) return;
     if (controller.position.pixels >= controller.position.maxScrollExtent - 200) {
       setState(() => _isLoading = true);
       if (isSearching) {
         fetchSearchData(currentSearchQuery, ++searchCurrentPage).then((data) {
           setState(() {
             searchItems.addAll(data);
             _isLoading = false;
           });
         });
       } else {
         fetchNormalData(++normalCurrentPage).then((data) {
           setState(() {
             normalItems.addAll(data);
             _isLoading = false;
           });
         });
       }
     }
   }
   

4. 列表渲染：
   根据isSearching状态切换数据源：

   ListView.builder(
     controller: controller,
     itemCount: (isSearching ? searchItems : normalItems).length + (_isLoading ? 1 : 0),
     itemBuilder: (context, index) {
       if (index == (isSearching ? searchItems : normalItems).length) {
         return const Center(child: CircularProgressIndicator());
       }
       final item = (isSearching ? searchItems : normalItems)[index];
       return YourItemWidget(item: item);
     },
   )
   

方案2：带防抖的实时搜索分页 #

如果需要用户输入时自动触发搜索，加入防抖逻辑避免频繁接口请求，同时每次搜索词变更都重置分页，只保留当前搜索词的分页数据：

1. 防抖实现：

   Timer? _debounceTimer;
   
   void onSearchQueryChanged(String query) {
     _debounceTimer?.cancel();
     _debounceTimer = Timer(const Duration(milliseconds: 500), () {
       if (query.isEmpty) {
         setState(() {
           isSearching = false;
           currentSearchQuery = '';
         });
         return;
       }
       setState(() {
         isSearching = true;
         currentSearchQuery = query;
         searchCurrentPage = 1;
         searchItems.clear();
         _isLoading = true;
       });
       fetchSearchData(query, searchCurrentPage).then((data) {
         setState(() {
           searchItems.addAll(data);
           _isLoading = false;
         });
       });
     });
   }
   

2. 滚动加载逻辑和方案1一致，只需要确保每次搜索词变化时，都重新从第一页开始加载搜索结果，不会复用旧的搜索数据。

方案3：双列表切换（正常/搜索） #

将正常懒加载列表和搜索结果列表作为两个独立的Widget，根据搜索状态切换显示：

Widget build(BuildContext context) {
  return Column(
    children: [
      YourSearchBar(onChanged: onSearchQueryChanged),
      Expanded(
        child: isSearching 
            ? SearchListView(
                query: currentSearchQuery,
                onLoadMore: () => fetchSearchData(currentSearchQuery, ++searchCurrentPage),
              )
            : NormalListView(
                onLoadMore: () => fetchNormalData(++normalCurrentPage),
              ),
      ),
    ],
  );
}

这种方式将两个列表的状态完全隔离，各自维护自己的分页、加载状态，代码更清晰，适合复杂场景。

关键注意点 #

• 避免重复请求：在加载数据时设置_isLoading标记，防止滚动时多次触发接口调用。
• 空状态/错误状态：搜索结果为空或接口请求失败时，要显示对应的提示UI，提升用户体验。
• 内存优化：退出搜索时可以清空搜索结果列表，避免不必要的内存占用。

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