Flutter分页加载时Hero标签重复错误的解决方法

一、修复重复加载问题 #

1. 优化滚动触发逻辑
   避免直接判断pixels == maxScrollExtent（滚动精度问题易导致多次触发），改用提前触发逻辑，同时加上无更多数据的判断：

   void _scrollListener() async {
     if (isLoadingMore || !hasMore) return;
     // 距离底部200像素时触发加载，减少重复调用
     if (scrollController.position.pixels >= 
         scrollController.position.maxScrollExtent - 200) {
       setState(() {
         isLoadingMore = true;
       });
       try {
         await fetchData();
         // 仅请求成功后递增页码
         page += 1;
       } catch (e) {
         print('加载失败: $e');
         // 可选：请求失败时回退页码，避免后续请求错误页码
         // page -= 1;
       } finally {
         setState(() {
           isLoadingMore = false;
         });
       }
     }
   }
   

2. 添加无更多数据的判断
   新增hasMore变量，当接口返回空数据时标记为无更多内容，停止后续加载：

   bool hasMore = true;
   
   Future<void> fetchData() async {
     if (!hasMore) return;
     final url = 'https://api.pexels.com/v1/curated?per_page=15&page=$page';
     final headers = {
       'Content-Type': 'application/json',
       'Authorization': apiKey,
     };
     final response = await http.get(Uri.parse(url), headers: headers);
     if (response.statusCode == 200) {
       final jsonData = jsonDecode(response.body);
       List newPhotos = jsonData['photos'];
       if (newPhotos.isEmpty) {
         setState(() {
           hasMore = false;
         });
         return;
       }
       setState(() {
         photos += newPhotos;
       });
     } else {
       throw Exception('Request failed with status: ${response.statusCode}');
     }
   }
   

3. 避免页码错乱
   将页码递增操作放在请求成功之后，防止请求失败时页码错误递增，导致重复请求同一页数据。

二、解决Hero标签重复问题 #

1. 用图片唯一ID作为Hero的tag
   Pexels返回的每张图片都有唯一id，直接用它作为Hero的tag，确保全局唯一：

   Hero(
     tag: photo['id'],
     child: Image.network(photo['src']['small']),
   )
   

2. 给列表项设置唯一Key
   列表项必须使用基于图片id的ValueKey，让Flutter能正确识别每个列表项，避免Widget树重建时出现标签冲突：

   ListView.builder(
     controller: scrollController,
     itemCount: photos.length + (isLoadingMore ? 1 : 0),
     itemBuilder: (context, index) {
       if (index == photos.length) {
         return const Center(child: CircularProgressIndicator());
       }
       final photo = photos[index];
       // 用图片id作为列表项的唯一Key
       return GestureDetector(
         key: ValueKey(photo['id']),
         onTap: () {
           Navigator.push(context, MaterialPageRoute(
             builder: (context) => DetailScreen(photo: photo),
           ));
         },
         child: Hero(
           tag: photo['id'],
           child: Image.network(photo['src']['small']),
         ),
       );
     },
   )
   

3. 详情页Hero保持相同tag
   详情页的Hero必须和列表页使用完全一致的tag（即同一图片的id）：

   class DetailScreen extends StatelessWidget {
     final Map photo;
     const DetailScreen({super.key, required this.photo});
   
     @override
     Widget build(BuildContext context) {
       return Scaffold(
         body: Hero(
           tag: photo['id'],
           child: Image.network(photo['src']['original']),
         ),
       );
     }
   }
   

额外注意事项 #

• 禁止用index作为Hero的tag或列表项的Key：列表新增数据时，原有项的index会变化，导致标签和Key重复。
• 检查photos列表是否有重复项：如果重复加载同一页数据，会出现相同id的图片，进而引发Hero标签冲突，上述的hasMore和页码控制可避免此问题。

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