API响应正常但Flutter应用界面不展示数据，求代码排查

问题根源 #

1. API解析完全错误：NewsAPI返回的JSON是包含articles字段的对象，你直接遍历整个data对象（实际是遍历键值对），根本没拿到文章数组，导致apiModel始终为空，界面只会显示加载转圈。
2. Future重复调用：每次组件重建都会重新执行getData()，既浪费网络请求，还可能导致数据状态混乱。
3. 依赖全局变量而非快照数据：你用全局的apiModel.length作为列表长度，而非Future返回的snapshot.data，就算数据解析正确，也可能因状态不同步无法更新UI。
4. 缺少错误处理逻辑：请求或解析出错时没有提示，无法快速定位问题。

修复后的完整代码 #

class _MyHomePageState extends State<MyHomePage> {
  final url = "https://newsapi.org/v2/top-headlines?country=us&category=sports&apiKey=bb66e3f0405944a58cb6853e55995bec";
  late Future<List<ApiModel>> _futureData;

  Future<List<ApiModel>> getData() async {
    final response = await http.get(Uri.parse(url));
    
    if (response.statusCode == 200) {
      var data = jsonDecode(response.body);
      // 重点：获取articles数组，这才是新闻列表的数据源
      List<dynamic> articles = data['articles'];
      // 将数组转换为ApiModel列表返回
      return articles.map((article) => ApiModel.fromJson(article)).toList();
    } else {
      // 抛出错误，让FutureBuilder捕获并提示
      throw Exception('请求失败：${response.statusCode}');
    }
  }

  @override
  void initState() {
    super.initState();
    // 在initState中初始化Future，避免每次组件重建都发起请求
    _futureData = getData();
  }

  @override
  Widget build(BuildContext context) {
    return FutureBuilder(
      future: _futureData,
      builder: (context, snapshot) {
        if (snapshot.hasData) {
          return ListView.builder(
            // 使用快照中的数据长度作为列表项数量
            itemCount: snapshot.data!.length,
            itemBuilder: (context, index) {
              final article = snapshot.data![index];
              return Container(
                height: 200,
                padding: const EdgeInsets.all(10),
                child: Column(
                  crossAxisAlignment: CrossAxisAlignment.start,
                  children: [
                    Text.rich(TextSpan(children: [
                      const TextSpan(text: '标题：', style: TextStyle(fontWeight: FontWeight.bold)),
                      TextSpan(text: article.title ?? '无标题'),
                    ])),
                    const SizedBox(height: 8),
                    Text.rich(TextSpan(children: [
                      const TextSpan(text: '来源：', style: TextStyle(fontWeight: FontWeight.bold)),
                      TextSpan(text: article.source?.name ?? '未知来源'),
                    ])),
                  ],
                ),
              );
            },
          );
        } else if (snapshot.hasError) {
          // 加载出错时显示错误信息
          return Center(child: Text('加载失败：${snapshot.error}'));
        } else {
          // 加载中显示进度指示器
          return const Center(child: CircularProgressIndicator());
        }
      },
    );
  }
}

关键修复说明 #

• 修正API解析逻辑，正确提取articles数组并转换为目标模型列表。
• 将Future初始化移至initState，避免重复发起网络请求。
• 直接使用snapshot.data作为UI渲染的数据源，保证数据与UI状态同步。
• 添加错误捕获与提示，方便快速排查异常问题。

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