Flutter，如何获取对象的数据数组并显示到ListView.builder？

Question

我是 flutter 的新手，我想从本地主机 phpmydmin 获取我的数据。这是我的 json:

{
    "status": true,
    "message": "Data ditemukan",
    "data": [
        {
            "id": "1",
            "username": "admin",
            "password": "d033e22ae348aeb5660fc2140aec35850c4da997",
            "nama": "admin",
            "token": "2a5c97cb31308b8d818da33a041fa47d"
        },
        {
            "id": "3",
            "username": "sani",
            "password": "86862f0600c8b9829d9ca9c8aaca3f0727b44b6e",
            "nama": "Sani Sandhika",
            "token": "661e23835d27f9d45cf371f59533f163"
        },
        {
            "id": "4",
            "username": "seno",
            "password": "d61a4fe61485d6437b698c11635d8fb8c5b79d2f",
            "nama": "Seno",
            "token": "7b9f0f54ca01c323bc810206adcaa38c"
        },
        {
            "id": "5",
            "username": "username",
            "password": "5baa61e4c9b93f3f0682250b6cf8331b7ee68fd8",
            "nama": "nama",
            "token": null
        }
    ]
}

这是我的用户模型：

import 'dart:convert';

List<User> allUsers(String str) {
  final jsonData = json.decode(str);
  return new List<User>.from(jsonData.map((x) => User.fromJson(x)));
}

class User {
  bool status;
  String message;
  List<Data> data;

  User({
    this.status,
    this.message,
    this.data,
  });

  factory User.fromJson(Map<String, dynamic> parsedJson) {
    var list = parsedJson['data'] as List;
    print(list.runtimeType);
    List<Data> dataList = list.map((i) => Data.fromJson(i)).toList();

    return User(
      status: parsedJson['status'],
      message: parsedJson['message'],
      data: dataList,
    );
  }
}

class Data {
  final int id;
  final String nama;
  final String username;

  Data({
    this.id,
    this.nama,
    this.username,
  });

  factory Data.fromJson(Map<String, dynamic> parsedJson) {
    return Data(
      id: parsedJson['id'],
      nama: parsedJson['nama'],
      username: parsedJson['username'],
    );
  }
}

这是我的 RestApi：

import 'package:flutter_rest_api_crud/models/models.dart';

import 'package:http/http.dart' as http;

class RestApi {
  String url = 'http://192.168.1.5/gizi/user/';

  Future<List<User>> getUsers() async {
    final response = await http.get('$url/user');
    print(response.body);
    return allUsers(response.body);
  }
}

最后是我的主屏幕：

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

class HomeScreen extends StatefulWidget {
  HomeScreen({Key key}) : super(key: key);

  @override
  _HomeScreenState createState() => _HomeScreenState();
}

class _HomeScreenState extends State<HomeScreen> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(),
    );
  }
}

我想从本地主机 phpmyadmin 获取“数据”中的数据。并将其放在 ListView.builder 上。而且我不知道在我的主屏幕上实现列表视图的下一步是什么。谁能帮帮我？

Answer 1

您可以在初始化 Widget 后点击 API 端点：

 List<User> _users = [];
  @override
  void initState() {
    super.initState();
    _load();
  }

  void _load() async {
    List<User> users =
        await RestApi.getUsers(); // load the users on Widget init
    setState(() => _users = users);
  }

然后显示一个嵌套的ListView来显示每个User的Data:

    return Scaffold(
      appBar: AppBar(),
      body: new ListView.builder(
        itemCount: _users.length,
        itemBuilder: (BuildContext ctxt, int i) {
          return new Card(
            child: Column(
              children: [
                Text(_users[i].username),
                ListView.builder(
                  itemCount: _users[i].data.length,
                  itemBuilder: (BuildContext ctx, int j) {
                    return Text(_users[i]
                        .data[j]
                        .username); // display username as an example
                  },
                ),
              ],
            ),
          );
        },
      ),
    );

下面是一个完整的例子：

class _HomeScreenState extends State<HomeScreen> {
  List<User> _users = [];
  @override
  void initState() {
    super.initState();
    _load();
  }

  void _load() async {
    List<User> users =
        await RestApi.getUsers(); // load the users on Widget init
    setState(() => _users = users);
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(),
      body: new ListView.builder(
        itemCount: _users.length,
        itemBuilder: (BuildContext ctxt, int i) {
          return new Card(
            child: Column(
              children: [
                Text(_users[i].username),
                ListView.builder(
                  itemCount: _users[i].data.length,
                  itemBuilder: (BuildContext ctx, int j) {
                    return Text(_users[i]
                        .data[j]
                        .username); // display username as an example
                  },
                ),
              ],
            ),
          );
        },
      ),
    );
  }
}

随着您的应用变得越来越复杂，我建议您检查不同的 State Management 策略，例如 BLoC.

Flutter，如何获取对象的数据数组并显示到ListView.builder？

Flutter, how to get data array of object and show to ListView.builder?

mysql

dart

flutter

flutter-futurebuilder