我想创建一个新闻应用程序,并且已将newsapi.org用作源。
我正在尝试获取Http库提供的JSON数据。
我在下面提供了完整的代码。
它不会给我任何错误,但不会加载任何数据,当我打印数据时,它可以打印所有内容,但无法显示。
我不是什么问题,但是我所有的项目都已停止解决此问题。
我正在寻找此代码的解决方案,因为它不起作用。
import 'dart:convert'; import 'package:flutter/material.dart'; import 'package:http/http.dart'; import 'package:newly/services/networking.dart'; import 'package:newly/widgets/article.dart'; class NewsScreen extends StatefulWidget { @override _NewsScreenState createState() => _NewsScreenState(); } class _NewsScreenState extends State<NewsScreen> { List<Article> articles = []; NetworkHelper networkHelper = NetworkHelper( url: 'https://newsapi.org/v2/everything?q=bitcoin&apiKey=392495172bab4b3885ae93760df54b91', ); Future<List<Widget>> getNews() async { var newsData = await networkHelper.getData(); for (int i = 0; i < await newsData['articles'].length; i++) { var title = await newsData['articles'][i]['title']; var urlToImage = await newsData['articles'][i]['urlToImage']; var content = await newsData['articles'][i]['content']; var author = await newsData['articles'][i]['author']; var url = await newsData['articles'][i]['url']; print(title); print(urlToImage); print(url); print(content); print(author); print('123456789123456789123456789123456789'); articles.add( Article( author: author, content: content, title: title, url: url, urlToImage: urlToImage, ), ); print(articles[0].author); } return articles; } Future<List<Article>> showArticles() async { var data = await get( 'https://newsapi.org/v2/everything?q=bitcoin&apiKey=392495172bab4b3885ae93760df54b91', ); var dataDecoded = await json.decode(data.body); List<Article> articles = []; await dataDecoded.forEach( (article) { articles.add( Article( author: article['author'], content: article['content'], title: article['title'], url: article['url'], urlToImage: article['urlToImage'], ), ); }, ); return articles; } @override Widget build(BuildContext context) { return Scaffold( appBar: AppBar( backgroundColor: Colors.black, centerTitle: true, title: Text( 'Newly', style: TextStyle( color: Colors.white, ), ), ), body: FutureBuilder( future: getNews(), builder: (context, snapshot) { return ListView( children: articles, ); }, ), ); } }
网络助手:
import 'package:http/http.dart' as http; import 'dart:convert'; class NetworkHelper { NetworkHelper({this.url}); final String url; Future getData() async { http.Response response = await http.get(url); if (response.statusCode == 200) { String data = response.body; return json.decode(data); } else { print('something wrong'); print(response.statusCode); } } }
问题在于显示文章。yaa也正如@ISpam Ossama所说,您必须使用setState这样将数据添加到列表中。
void getNews() async { var newsData = await networkHelper.getData(); for (int i = 0; i < newsData['articles'].length; i++) { var title = newsData['articles'][i]['title']; var urlToImage = newsData['articles'][i]['urlToImage']; var content = newsData['articles'][i]['content']; var author = newsData['articles'][i]['author']; var url = newsData['articles'][i]['url']; print(title); print(urlToImage); print(url); print(content); print(author); print('123456789123456789123456789123456789'); setState(() { articles.add( Article( author: author, content: content, title: title, url: url, urlToImage: urlToImage, ), ); }); print(articles[0].author); } }
现在,您必须显示这样的文章。
ListView.builder( itemCount: articles.length, itemBuilder: (BuildContext ctxt, int index) { return Text(articles[index].title); }, )
希望对您有帮助!