為什么我的代碼總是回傳circularprogressindicator，它沒有獲取我的資料

當我運行應用程式時，它不會獲取資料

import 'package:fakeapi/homepage.dart';
import 'package:flutter/material.dart';
import 'dart:convert';

import 'package:fakeapi/album.dart';
import 'package:flutter/material.dart';
import 'package:flutter/src/widgets/container.dart';
import 'package:flutter/src/widgets/framework.dart';
import 'package:http/http.dart' as http;

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.lightGreen,
      ),
      home: const HomePage(),
    );
  }
}



class HomePage extends StatefulWidget {
  const HomePage({super.key});

  @override
  State<HomePage> createState() => _HomePageState();
}

class _HomePageState extends State<HomePage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: FutureBuilder(
        builder: ((context, snapshot) {
          if (snapshot.hasError) {
            throw Exception("ERROR");
          } else if (snapshot.hasData) {
            ListView.builder(
              itemBuilder: ((context, index) {
                return Text(snapshot.data!.title);
              }),
              itemCount: 1,
            );
          }
          return Center(
            child: CircularProgressIndicator(),
          );
        }),
        future: getAlbums(),
      ),
    );
  }
}

Future<Album> getAlbums() async {
  final response = await http
      .get(Uri.parse("https://jsonplaceholder.typicode.com/albums/10"));
  if (response.statusCode == 200) {
    return Album.fromJson(jsonDecode(response.body));
  } else {
    throw Exception("hey");
  }
}

// To parse this JSON data, do
//
//     final album = albumFromJson(jsonString);



List<Album> albumFromJson(String str) =>
    List<Album>.from(json.decode(str).map((x) => Album.fromJson(x)));

String albumToJson(List<Album> data) =>
    json.encode(List<dynamic>.from(data.map((x) => x.toJson())));




This is how i coded my class

class Album {
  Album({
    required this.userId,
    required this.id,
    required this.title,
  });

  int userId;
  int id;
  String title;

  factory Album.fromJson(Map<String, dynamic> json) => Album(
        userId: json["userId"],
        id: json["id"],
        title: json["title"],
      );

  Map<String, dynamic> toJson() => {
        "userId": userId,
        "id": id,
        "title": title,
      };
}

我試圖獲取資料并顯示它

import 'package:fakeapi/homepage.dart';
import 'package:flutter/material.dart';
import 'dart:convert';

import 'package:fakeapi/album.dart';
import 'package:flutter/material.dart';
import 'package:flutter/src/widgets/container.dart';
import 'package:flutter/src/widgets/framework.dart';
import 'package:http/http.dart' as http;

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.lightGreen,
      ),
      home: const HomePage(),
    );
  }
}



class HomePage extends StatefulWidget {
  const HomePage({super.key});

  @override
  State<HomePage> createState() => _HomePageState();
}

class _HomePageState extends State<HomePage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: FutureBuilder(
        builder: ((context, snapshot) {
          if (snapshot.hasError) {
            throw Exception("ERROR");
          } else if (snapshot.hasData) {
            ListView.builder(
              itemBuilder: ((context, index) {
                return Text(snapshot.data!.title);
              }),
              itemCount: 1,
            );
          }
          return Center(
            child: CircularProgressIndicator(),
          );
        }),
        future: getAlbums(),
      ),
    );
  }
}

Future<Album> getAlbums() async {
  final response = await http
      .get(Uri.parse("https://jsonplaceholder.typicode.com/albums/10"));
  if (response.statusCode == 200) {
    return Album.fromJson(jsonDecode(response.body));
  } else {
    throw Exception("hey");
  }
}

// To parse this JSON data, do
//
//     final album = albumFromJson(jsonString);



List<Album> albumFromJson(String str) =>
    List<Album>.from(json.decode(str).map((x) => Album.fromJson(x)));

String albumToJson(List<Album> data) =>
    json.encode(List<dynamic>.from(data.map((x) => x.toJson())));

class Album {
  Album({
    required this.userId,
    required this.id,
    required this.title,
  });

  int userId;
  int id;
  String title;

  factory Album.fromJson(Map<String, dynamic> json) => Album(
        userId: json["userId"],
        id: json["id"],
        title: json["title"],
      );

  Map<String, dynamic> toJson() => {
        "userId": userId,
        "id": id,
        "title": title,
      };
}

uj5u.com熱心網友回復：

你怎么知道它不獲取資料？使用您當前的代碼，當沒有錯誤時，您總是回傳 CircularProgressIndicator。

您必須回傳 ListView 構建器。IE

return ListView.builder(
              itemBuilder: ((context, index) {
                return Text(snapshot.data!.title);
              }),
              itemCount: 1,
            );

uj5u.com熱心網友回復：

您當前的 api 回傳一個模型，

.....typicode.com/albums/10" 

你不會在這里得到一個串列。您可以從中回傳單個專案，例如將 ListView 更改為 Text。

if (snapshot.hasData) {
  return Text("${snapshot.data?.title}");

您可以關注此小部件以接收完整串列

class HomePage extends StatefulWidget {
  const HomePage({super.key});

  @override
  State<HomePage> createState() => _HomePageState();
}

class _HomePageState extends State<HomePage> {
  late final future = getAlbums();
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: FutureBuilder<List<Album>?>(
          future: future,
          builder: (context, snapshot) {
            print(snapshot);
            if (snapshot.hasData) {
              return ListView.builder(
                itemCount: snapshot.data?.length,
                itemBuilder: ((context, index) {
                  final model = snapshot.data![index];
                  return Text("${model.title}");
                }),
              );
            }
            return Center(
              child: CircularProgressIndicator(),
            );
          }),
    );
  }
}

Future<List<Album>?> getAlbums() async {
  final response =
      await http.get(Uri.parse("https://jsonplaceholder.typicode.com/albums/"));
  if (response.statusCode == 200) {
    final data = jsonDecode(response.body) as List?;

    return data?.map((e) => Album.fromJson(e)).toList();
  } else {
    throw Exception("hey");
  }
}

uj5u.com熱心網友回復：

把你改成FutureBuilder這樣：

builder: ((context, snapshot) {
    switch (snapshot.connectionState) {
      case ConnectionState.waiting:
        return Center(
            child: CircularProgressIndicator(),
          );
      default:
        if (snapshot.hasError) {
          throw Exception("ERROR");
        } else {
          return ListView.builder(
               itemBuilder: ((context, index) {
                   return Text(snapshot.data!.title);
               }),
               itemCount: 1,
          );
        }
    }
}),

標籤：json扑镖

上一篇：為什么不使用手勢檢測器中的onTap？

下一篇：引數型別“功能？”不能分配給引數型別“voidFunction(String)?”。這段代碼有修復嗎？