时间戳

首页 > 解决方案 > 来自 API 的 Flutter ListView 数据未显示在我的网络应用程序上

api - 来自 API 的 Flutter ListView 数据未显示在我的网络应用程序上

问题描述

您好，我尝试从我的 Flutter Web 项目的 API 数据中创建元素列表视图。每次尝试时，我都没有在页面上显示结果。我应该展示法语系的 ListView；我尝试使用更基本的代码来拼命尝试在我的页面上显示结果。所以我尝试使用比我更简单的代码来查看它是如何工作的，但仍然没有结果（appBar 下的空白页）。我认为我不太了解它应该如何工作，但我找到了一个教程，其中包含来自 API 数据的元素的随机 ListView 的示例代码；但这也行不通我有点压力...这段代码有问题吗？关于如何从 API 获取数据并将它们显示在 Flutter 上的 ListView 上，我可以有更多解释吗？谢谢大家的帮助

import 'dart:async';
import 'dart:convert';
import 'package:flutter/material.dart';
import 'package:http/http.dart' as http;

const baseUrl = "https://jsonplaceholder.typicode.com";

class API {
  static Future getUsers() {
    var url = baseUrl + "/users";
    return http.get(url);
  }
}


class User {
  int id;
  String name;
  String email;

  User(int id, String name, String email) {
    this.id = id;
    this.name = name;
    this.email = email;
  }

  User.fromJson(Map json)
      : id = json['id'],
        name = json['name'],
        email = json['email'];

  Map toJson() {
    return {'id': id, 'name': name, 'email': email};
  }
}

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  build(context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      title: 'My Http App',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: MyListScreen(),
    );
  }
}

class MyListScreen extends StatefulWidget {
  @override
  createState() => _MyListScreenState();
}

class _MyListScreenState extends State {
  var users = new List<User>();

  _getUsers() {
    API.getUsers().then((response) {
      setState(() {
        Iterable list = json.decode(response.body);
        users = list.map((model) => User.fromJson(model)).toList();
      });
    });
  }

  initState() {
    super.initState();
    _getUsers();
  }

  dispose() {
    super.dispose();
  }

  @override
  build(context) {
    return Scaffold(
        appBar: AppBar(
          title: Text("User List"),
        ),
        body: ListView.builder(
          itemCount: users.length,
          itemBuilder: (context, index) {
            return ListTile(title: Text(users[index].name));
          },
        ));
  }
}

标签： apilistviewflutterweb-applications

解决方案

尝试在 getUsers 上使用 async 和 await：

static Future getUsers() async {
  var url = baseUrl + "/users";
  return await http.get(url);
}

推荐阅读