Flutter中http.get无法返回全部请求数据的问题求助

核心问题分析 #

1. FutureBuilder滥用导致重复渲染：外层ListView.builder设置itemCount:100，每个item都实例化TileFutureBuilder，等于创建了100个FutureBuilder监听同一个数据请求。每个FutureBuilder内部又渲染完整的文章列表，导致UI重复渲染、资源浪费，同时触发渲染异常，表现为部分数据加载失败。
2. 未处理null字段：接口返回的部分文章字段（如title、urlToImage等）为null，但NewsTile直接将其作为非空String使用，触发type 'Null' is not a subtype of type 'String'错误。
3. 数据结构未做校验：直接访问snapshot.data['articles']及其内部字段，未做null判断，导致空指针异常。

修复步骤 #

1. 重构FutureBuilder层级

将FutureBuilder移到最外层，包裹整个文章列表，避免重复创建：

class _TestScreenState extends State<TestScreen> {
  Future<Map<String, dynamic>> getData() async {
    final response = await http.get(kLink);
    if (response.statusCode == 200) {
      return jsonDecode(response.body);
    } else {
      throw Exception('请求失败：${response.statusCode}');
    }
  }

  late Future<Map<String, dynamic>> data;

  @override
  void initState() {
    super.initState();
    data = getData();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Colors.grey,
      appBar: AppBar(title: const Text('News')),
      body: FutureBuilder(
        future: data,
        builder: (context, snapshot) {
          if (snapshot.hasError) {
            return Center(child: Text('加载失败：${snapshot.error}'));
          }
          if (!snapshot.hasData) {
            return const Center(child: NewsTilePlaceholder());
          }
          // 校验并获取文章列表
          final rawArticles = snapshot.data?['articles'] ?? [];
          // 过滤掉null的文章条目
          final articles = rawArticles.where((item) => item != null).toList();
          
          return ListView.builder(
            padding: const EdgeInsets.all(8),
            itemCount: articles.length,
            itemBuilder: (context, index) {
              return NewsTile(mapData: articles[index]);
            },
          );
        },
      ),
    );
  }
}

2. 给NewsTile添加null安全处理

修改NewsTile，对所有可能为null的字段设置默认值：

class NewsTile extends StatelessWidget {
  final Map<String, dynamic> mapData;

  const NewsTile({Key? key, required this.mapData}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    // 为null字段设置兜底值
    final title = mapData['title'] ?? '无标题';
    final description = mapData['description'] ?? '无描述';
    final imageUrl = mapData['urlToImage'] ?? 'https://via.placeholder.com/150';

    return Card(
      margin: const EdgeInsets.symmetric(vertical: 4),
      child: ListTile(
        leading: Image.network(imageUrl, width: 60, fit: BoxFit.cover),
        title: Text(title),
        subtitle: Text(description),
      ),
    );
  }
}

3. 移除冗余的TileFutureBuilder类

重构后不再需要TileFutureBuilder，直接在主页面的FutureBuilder中渲染文章列表即可。

额外优化建议 #

• 不要硬编码itemCount:100，直接使用articles.length，避免超出实际数据长度导致异常。
• 给网络请求添加超时处理，避免无限等待：

Future<Map<String, dynamic>> getData() async {
  final response = await http.get(kLink).timeout(const Duration(seconds: 10));
  // 后续逻辑
}

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