NewsAPI 错误无法在屏幕上显示任何内容，但实际上我正在控制台中获取数据

Question

主 dart 文件实际上我正在创建使用 json 文件获取 newsapi 信息的新闻应用程序，但我无法在屏幕上显示数据

  import 'package:flutter/material.dart';
    import 'package:newsapi/model.dart';
    
    void main() {
      runApp(MyApp());
    }
    
    class MyApp extends StatelessWidget {
      @override
      Widget build(BuildContext context) {
        return MaterialApp(
          home: MyHomePage(),
        );
      }
    }
    
    class MyHomePage extends StatefulWidget {
      @override
      _MyHomePageState createState() => _MyHomePageState();
    }
    
    class _MyHomePageState extends State<MyHomePage> {
      Future<NewsApi> news;
    
      @override
      void initState() {
        super.initState();
        news = news;
      }
    
      @override
      Widget build(BuildContext context) {
        return Scaffold(
          appBar: AppBar(
            title: Text("MovieApp"),
          ),
          body: FutureBuilder<NewsApi>(
              future: news,
              builder: (context, snapshot) {
                return Text(snapshot.data.articles.toString());
              }),
        );
      }
    }

我的网络class

import 'dart:convert';

import 'package:http/http.dart';
import 'package:newsapi/model.dart';

class Network {
  Future<NewsApi> getNews() async {
    var finalurl =
        "https://newsapi.org/v2/top-headlines?country=us&apiKey=cdffcc6901e24943ad89df8cdb69a0eb";
    final Response response = await get(Uri.encodeFull(finalurl));
    if (response.statusCode == 200) {
      print("NEws:${response.body}");
      return NewsApi.fromJson(jsonDecode(response.body));
    } else {
      throw Exception("Error Getting the data");
    }
  }
}

我的主模型 class 由 gtihub 扩展创建，我只是使用 json to dart 转换工具

class NewsApi {
  String status;
  int totalResults;
  List<Articles> articles;

  NewsApi({this.status, this.totalResults, this.articles});

  NewsApi.fromJson(Map<String, dynamic> json) {
    status = json['status'];
    totalResults = json['totalResults'];
    if (json['articles'] != null) {
      articles = new List<Articles>();
      json['articles'].forEach((v) {
        articles.add(new Articles.fromJson(v));
      });
    }
  }

  Map<String, dynamic> toJson() {
    final Map<String, dynamic> data = new Map<String, dynamic>();
    data['status'] = this.status;
    data['totalResults'] = this.totalResults;
    if (this.articles != null) {
      data['articles'] = this.articles.map((v) => v.toJson()).toList();
    }
    return data;
  }
}

class Articles {
  Source source;
  String author;
  String title;
  String description;
  String url;
  String urlToImage;
  String publishedAt;
  String content;

  Articles(
      {this.source,
      this.author,
      this.title,
      this.description,
      this.url,
      this.urlToImage,
      this.publishedAt,
      this.content});

  Articles.fromJson(Map<String, dynamic> json) {
    source =
        json['source'] != null ? new Source.fromJson(json['source']) : null;
    author = json['author'];
    title = json['title'];
    description = json['description'];
    url = json['url'];
    urlToImage = json['urlToImage'];
    publishedAt = json['publishedAt'];
    content = json['content'];
  }

  Map<String, dynamic> toJson() {
    final Map<String, dynamic> data = new Map<String, dynamic>();
    if (this.source != null) {
      data['source'] = this.source.toJson();
    }
    data['author'] = this.author;
    data['title'] = this.title;
    data['description'] = this.description;
    data['url'] = this.url;
    data['urlToImage'] = this.urlToImage;
    data['publishedAt'] = this.publishedAt;
    data['content'] = this.content;
    return data;
  }
}

class Source {
  String id;
  String name;

  Source({this.id, this.name});

  Source.fromJson(Map<String, dynamic> json) {
    id = json['id'];
    name = json['name'];
  }

  Map<String, dynamic> toJson() {
    final Map<String, dynamic> data = new Map<String, dynamic>();
    data['id'] = this.id;
    data['name'] = this.name;
    return data;
  }
}

我收到以下错误消息 The following NoSuchMethodError was throwed building FutureBuilder(dirty, state: _FutureBuilderState#6b8bd): getter 'articles' 被调用为 null。接收者：空尝试调用：articles

Answer 1

在 initState() 上，您将 NewsApi class 分配给 Future news 而不是 getNews() 函数。

这有效。

  @override
  void initState() {
    super.initState();
    news = Network().getNews();
  }

编辑：显示数据

  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("MovieApp"),
      ),
      body: FutureBuilder<NewsApi>(
        future: news,
        builder: (context, snapshot) {
          if (snapshot.hasData) {
            final data = snapshot.data.articles;
            return ListView.builder(
              itemCount: data.length,
              itemBuilder: (BuildContext context, int index) {
                return Padding(
                  padding: const EdgeInsets.all(8),
                  child: Column(
                    children: [
                      if (data[index].urlToImage != null)
                        Image.network(data[index].urlToImage),
                      Text(
                        data[index].title,
                        style: Theme.of(context).textTheme.bodyText1,
                      ),
                      Divider()
                    ],
                  ),
                );
              },
            );
          } else
            return Center(child: CircularProgressIndicator());
        },
      ),
    );
  }

NewsAPI 错误无法在屏幕上显示任何内容，但实际上我正在控制台中获取数据

NewsAPi error cannot be able to show anything on screen but actually i am getting data in console

dart

flutter

flutter-test

flutter-dependencies