Flutter中实现ListView每行发起网络请求获取数据的技术咨询

嘿，这个需求我之前做社交类APP的时候刚好碰到过！其实核心就是给每个列表项单独处理网络请求，但要注意状态管理和性能优化，不然很容易出现重复请求、卡顿甚至内存泄漏的问题。下面给你一步步拆解实现思路和代码示例：

简单来说，就是让每个列表项（比如你说的Instagram帖子行）作为独立的状态组件，在合适的时机（比如组件初始化、进入视口时）发起网络请求，然后自行管理请求的加载、成功、失败状态，最后把结果展示出来。

我们先从最基础的实现开始，用StatefulWidget结合FutureBuilder来处理请求：

1. 先写API请求函数 #

假设我们用http包来发起请求，先在pubspec.yaml里添加依赖，然后写一个获取点赞数的函数：

import 'dart:convert';
import 'package:http/http.dart' as http;

// 根据帖子ID获取点赞数
Future<int> fetchLikeCount(String postId) async {
  final response = await http.get(Uri.parse('https://your-api-domain.com/posts/$postId/likes'));
  
  if (response.statusCode == 200) {
    final data = json.decode(response.body);
    return data['like_count'];
  } else {
    throw Exception('Failed to load like count');
  }
}

2. 列表项Widget（带请求状态管理） #

每个帖子行用StatefulWidget实现，这样可以把请求的Future存在状态里，避免重复请求：

class PostItem extends StatefulWidget {
  final String postId;
  final String postTitle;

  const PostItem({
    super.key,
    required this.postId,
    required this.postTitle,
  });

  @override
  State<PostItem> createState() => _PostItemState();
}

class _PostItemState extends State<PostItem> {
  // 把请求Future存在状态中，避免每次build都重新发起请求
  late Future<int> _likeCountFuture;

  @override
  void initState() {
    super.initState();
    // 组件初始化时发起请求
    _likeCountFuture = fetchLikeCount(widget.postId);
  }

  @override
  Widget build(BuildContext context) {
    return ListTile(
      title: Text(widget.postTitle),
      trailing: FutureBuilder<int>(
        future: _likeCountFuture,
        builder: (context, snapshot) {
          if (snapshot.connectionState == ConnectionState.waiting) {
            // 加载中显示小圆圈
            return const CircularProgressIndicator(size: 16);
          } else if (snapshot.hasError) {
            // 请求失败显示错误图标
            return const Icon(Icons.error_outline, color: Colors.red);
          } else {
            // 请求成功显示点赞数
            return Text('${snapshot.data} ❤️');
          }
        },
      ),
    );
  }
}

3. 主页面的ListView #

用ListView.builder来构建列表，传入模拟的帖子数据：

class PostListView extends StatelessWidget {
  // 模拟5条帖子数据
  final List<Map<String, String>> _mockPosts = [
    {'id': '1', 'title': '今天去海边拍的日落！'},
    {'id': '2', 'title': '新入手的咖啡杯分享'},
    {'id': '3', 'title': Flutter开发踩坑日记'},
    {'id': '4', 'title': '周末徒步的绝美风景'},
    {'id': '5', 'title': '推荐一部治愈系动画'},
  ];

  PostListView({super.key});

  @override
  Widget build(BuildContext context) {
    return ListView.builder(
      padding: const EdgeInsets.symmetric(vertical: 8),
      itemCount: _mockPosts.length,
      itemBuilder: (context, index) {
        final post = _mockPosts[index];
        return PostItem(
          postId: post['id']!,
          postTitle: post['title']!,
        );
      },
    );
  }
}

上面的基础实现能满足需求，但如果列表很长或者网络环境不好，会有一些问题，下面是几个必须注意的优化点：

1. 避免重复请求 #

因为ListView会复用组件，如果用StatelessWidget+FutureBuilder，每次build都创建新的Future，滚动时会重复发起请求。所以一定要把Future存在StatefulWidget的状态里，就像上面示例那样，确保每个帖子只请求一次。

2. 取消未完成请求，防止内存泄漏 #

如果用户快速滚动，某个帖子行还没请求完成就被移出屏幕销毁，这时候未完成的请求会占用资源，导致内存泄漏。可以用dio的CancelToken来解决：

// 先添加dio依赖：dio: ^5.0.0
import 'package:dio/dio.dart';

class _PostItemState extends State<PostItem> {
  int? _likeCount;
  bool _isLoading = false;
  late CancelToken _cancelToken;

  @override
  void initState() {
    super.initState();
    _cancelToken = CancelToken();
    _fetchLikeCount();
  }

  @override
  void dispose() {
    // 组件销毁时取消请求
    _cancelToken.cancel('PostItem disposed');
    super.dispose();
  }

  Future<void> _fetchLikeCount() async {
    if (_isLoading) return;
    setState(() => _isLoading = true);
    
    try {
      final response = await Dio().get(
        'https://your-api-domain.com/posts/${widget.postId}/likes',
        cancelToken: _cancelToken,
      );
      setState(() {
        _likeCount = response.data['like_count'];
        _isLoading = false;
      });
    } catch (e) {
      if (e is DioException && e.type == DioExceptionType.cancel) {
        // 请求被取消，不需要处理
      } else {
        setState(() => _isLoading = false);
        // 可以在这里显示错误提示，或者允许重试
      }
    }
  }

  // build方法里根据_isLoading和_likeCount来渲染UI...
}

3. 滚动时延迟请求（按需加载） #

如果列表有几十上百条，一开始就全部发起请求会导致网络拥堵，最好等帖子行进入视口后再发起请求。可以用visibility_detector包来监听组件可见性：

1. 添加依赖：visibility_detector: ^0.4.0+2
2. 修改PostItem的build方法：

@override
Widget build(BuildContext context) {
  return VisibilityDetector(
    key: Key(widget.postId), // 每个帖子用唯一key
    onVisibilityChanged: (info) {
      // 当组件可见度超过50%，且还没请求过，就发起请求
      if (info.visibleFraction > 0.5 && !_isLoading && _likeCount == null) {
        _fetchLikeCount();
      }
    },
    child: ListTile(
      title: Text(widget.postTitle),
      trailing: _likeCount != null
          ? Text('$_likeCount ❤️')
          : _isLoading
              ? const CircularProgressIndicator(size: 16)
              : const Text('--'),
    ),
  );
}

如果需要在多个地方共享点赞数（比如用户点赞后实时更新），可以用Riverpod或Provider等状态管理工具，把点赞数存在全局状态中，这样不仅能避免重复请求，还能实现数据同步更新。

举个简单的Riverpod例子：

// 全局状态Provider
final likeCountsProvider = StateProvider<Map<String, int>>((ref) => {});

// 在PostItem中使用
class _PostItemState extends State<PostItem> {
  @override
  Widget build(BuildContext context) {
    final likeCounts = ref.watch(likeCountsProvider);
    final currentCount = likeCounts[widget.postId];

    return ListTile(
      title: Text(widget.postTitle),
      trailing: currentCount != null
          ? Text('$currentCount ❤️')
          : ElevatedButton(
              onPressed: () async {
                final count = await fetchLikeCount(widget.postId);
                ref.read(likeCountsProvider.notifier).update((state) {
                  state[widget.postId] = count;
                  return {...state};
                });
              },
              child: const Text('加载点赞数'),
            ),
    );
  }
}

这样，只要某个帖子的点赞数被请求过，其他地方用到该帖子的地方都会自动更新数据，不需要重复请求。

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