You need to enable JavaScript to run this app.
优惠活动
大模型
产品
解决方案
定价
更多

Flutter使用Newsapi.org免费API无法显示新闻完整内容如何解决

问题描述

我正在尝试使用newsapi.org提供的API开发一款新闻应用,当前使用免费版API密钥,新闻内容展示存在截断、无法完整显示的问题,异常效果可参考截图。

以下是实现API数据拉取与内容展示的相关代码:

import 'package:flutter/material.dart';
import 'package:news_api_flutter_package/model/article.dart';
import 'package:news_api_flutter_package/news_api_flutter_package.dart';
import 'package:flutter_spinkit/flutter_spinkit.dart';

class NewsPage extends StatefulWidget {
  const NewsPage({Key? key, required this.category}) : super(key: key);
  final String category;
  @override
  State<NewsPage> createState() => _NewsPageState();
}

class _NewsPageState extends State<NewsPage> {
  final NewsAPI _newsAPI = NewsAPI("MyAPIKEY");
  final spinkit = const SpinKitSpinningLines(
    color: Colors.yellow,
    size: 150.0,
  );

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: FutureBuilder<List<Article>>(
        future:
            _newsAPI.getTopHeadlines(country: "in", category: widget.category),
        builder: (context, snapshot) {
          if (snapshot.hasData) {
            return PageView.builder(
                itemCount: snapshot.data!.length,
                scrollDirection: Axis.vertical,
                itemBuilder: (context, index) {
                  return Column(
                    children: [
                      SizedBox(
                        height: 250,
                        width: MediaQuery.of(context).size.width,
                        child: FittedBox(
                            fit: BoxFit.fill,
                            child: Image.network(
                              snapshot.data![index].urlToImage.toString(),
                              fit: BoxFit.fill,
                            )),
                      ),
                      Align(
                          alignment: Alignment.centerLeft,
                          child: Padding(
                            padding: const EdgeInsets.all(20),
                            child: Text(
                              snapshot.data![index].title.toString(),
                              style: const TextStyle(fontSize: 22),
                            ),
                          )),
                      Padding(
                        padding: const EdgeInsets.only(left: 20, right: 20),
                        child: Text(
                          snapshot.data![index].content.toString(),
                          style: Theme.of(context).textTheme.subtitle1,
                        ),
                      )
                    ],
                  );
                });
          } else if (snapshot.hasError) {
            return Text(snapshot.error.toString());
          } else {
            return Container(
              child: spinkit,
            );
          }
        },
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: () {
          Navigator.pop(context);
        },
        backgroundColor: Colors.yellow,
        child: const Icon(Icons.arrow_back),
      ),
    );
  }
}

出于安全考虑,代码中已移除真实API密钥。请问是否有可行方案可以获取到新闻的完整正文内容?

解决方案

内容截断不是代码逻辑错误,是NewsAPI本身的产品限制:所有版本的NewsAPI接口返回的content字段都只会返回新闻前200个左右字符,末尾带截断字符数标识,官方不提供完整正文返回能力。

可以通过以下三种方案实现完整正文展示:

  • 最低成本方案:直接在页面中嵌入WebView组件,加载接口返回的url字段对应的新闻原网页,不需要额外做内容解析。Flutter生态直接使用webview_flutter插件即可实现,注意适配加载状态、页面JS权限即可。
  • 原生渲染方案:通过http包拉取新闻原网页的源码,配合html包做DOM解析,手动提取页面中的正文内容后用Text组件渲染。该方案需要适配不同新闻站点的页面结构,还要处理部分站点的反爬限制,开发成本较高。
  • 替换服务方案:直接选用本身就返回完整新闻正文的资讯类API服务,省去自行解析网页的适配成本。

额外提示:现有代码中PageView内的Column没有做滚动适配,长文本场景下会触发布局溢出报错,建议给Column外层包裹SingleChildScrollView组件解决该问题。


内容的提问来源于stack exchange,提问作者R3hankhan

相关产品推荐
方舟 Agent Plan

超全模态模型 × Harness 升级,最新支持 Deepseek-V4.1-Flash、GLM-5.3 系列、Doubao-Seedream-5.0-pro、Kimi-K3 (部分), 限时 9.9 元起

最近更新时间:2026.08.28 03:57:19