如何在颤动中显示列表

Question

你好我想问一下如何在flutter中显示列表

这是一个来自 json 的示例响应，里面有另一个列表

{
"results": [
    {
        "pembelian": [
            {
                "foto": null,
                "note": null,
                "avail": 1,
                "harga": 5500,
                "id_toko": 112,
                "id_barang": 415,
                "harga_toko": 4400,
                "nama_barang": "Nasi"
            },
            {
                "foto": null,
                "note": null,
                "avail": 1,
                "harga": 5500,
                "id_toko": 112,
                "id_barang": 414,
                "harga_toko": 4400,
                "nama_barang": "Air"
            }
        ],
        "payment_method": "cash",
        "total_harga": 17750
    }
        ]
}

这就是我从 API 获取它的方式

class PesananApi {

  static const String api = 'https://api.api.id/';
  static const String apiOver = 'inv?invoice=';


  Future<Invoice> getListInv({@required String invoice}) async {
    final String url = api + apiOver + invoice;
    print(url);
    var response = await http.get(url).then((val) => json.decode(val.body));

    return Invoice.fromJson(response['results']);

  }
}

这就是我展示它的方式

FutureBuilder<Invoice>(
                            future: PesananApi().getListInv(
                                invoice:
                                    snapshot.data.data['invoiceId'].toString()),
                            builder: (context, data) {
                              if (!data.hasData)
                                return Center(
                                  child: CircularProgressIndicator(),
                                );
                              return ListView.builder(
                                itemCount: data.data.pembelian.length,
                                itemBuilder: (context, i) => new
                                Text(data.data.pembelian[i].namaBarang),
                              );
                            }),

对于发票类，您可以从这里看到 https://app.quicktype.io?share=8uxohFwef3SQwLcMTsdy

我只想知道pembelian的名单

有人知道这段代码有什么问题吗？谢谢

Answer 1

你必须改变这一行：

return Invoice.fromJson(response['results']);

到：

return Invoice.fromJson(response['results'][0]);

我在这里做了一个工作示例：

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

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      debugShowCheckedModeBanner: false,
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: MyHomePage(),
    );
  }
}

class MyHomePage extends StatefulWidget {
  static const routeName = '/';

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

class _MyHomePageState extends State<MyHomePage> {
  Widget build(BuildContext context) {
    return Scaffold(
      body: FutureBuilder<Invoice>(
          future: PesananApi().getListInv(invoice: "abc"),
          builder: (context, data) {
            if (!data.hasData)
              return Center(
                child: CircularProgressIndicator(),
              );
            return ListView.builder(
              itemCount: data.data.pembelian.length,
              itemBuilder: (context, i) =>
                  new Text(data.data.pembelian[i].namaBarang),
            );
          }),
    );
  }
}

class PesananApi {
  static const String api = 'https://api.api.id/';
  static const String apiOver = 'inv?invoice=';

  static const body = """{
"results": [
    {
        "pembelian": [
            {
                "foto": null,
                "note": null,
                "avail": 1,
                "harga": 5500,
                "id_toko": 112,
                "id_barang": 415,
                "harga_toko": 4400,
                "nama_barang": "Nasi"
            },
            {
                "foto": null,
                "note": null,
                "avail": 1,
                "harga": 5500,
                "id_toko": 112,
                "id_barang": 414,
                "harga_toko": 4400,
                "nama_barang": "Air"
            }
        ],
        "payment_method": "cash",
        "total_harga": 17750
    }
        ]
}""";

  Future<Invoice> getListInv({@required String invoice}) async {
    final String url = api + apiOver + invoice;
    print(url);

    // replaced http call with static result
    //var response = await http.get(url).then((val) => json.decode(val.body));
    var response = json.decode(body);

    // replace response['results'] with response['results'][0]
    return Invoice.fromJson(response['results'][0]);
  }
}

class Invoice {
  List<Pembelian> pembelian;
  String paymentMethod;
  int totalHarga;

  Invoice({
    this.pembelian,
    this.paymentMethod,
    this.totalHarga,
  });

  factory Invoice.fromJson(Map<String, dynamic> json) => Invoice(
        pembelian: List<Pembelian>.from(
            json["pembelian"].map((x) => Pembelian.fromJson(x))),
        paymentMethod: json["payment_method"],
        totalHarga: json["total_harga"],
      );

  Map<String, dynamic> toJson() => {
        "pembelian": List<dynamic>.from(pembelian.map((x) => x.toJson())),
        "payment_method": paymentMethod,
        "total_harga": totalHarga,
      };
}

class Pembelian {
  dynamic foto;
  dynamic note;
  int avail;
  int harga;
  int idToko;
  int idBarang;
  int hargaToko;
  String namaBarang;

  Pembelian({
    this.foto,
    this.note,
    this.avail,
    this.harga,
    this.idToko,
    this.idBarang,
    this.hargaToko,
    this.namaBarang,
  });

  factory Pembelian.fromJson(Map<String, dynamic> json) => Pembelian(
        foto: json["foto"],
        note: json["note"],
        avail: json["avail"],
        harga: json["harga"],
        idToko: json["id_toko"],
        idBarang: json["id_barang"],
        hargaToko: json["harga_toko"],
        namaBarang: json["nama_barang"],
      );

  Map<String, dynamic> toJson() => {
        "foto": foto,
        "note": note,
        "avail": avail,
        "harga": harga,
        "id_toko": idToko,
        "id_barang": idBarang,
        "harga_toko": hargaToko,
        "nama_barang": namaBarang,
      };
}

Answer 2

您的列表在另一个列表中，而该列表在另一个命名列表中，因此您可能需要更改代码：

return Invoice.fromJson(response['results']);

到这里：

return Invoice.fromJson(response['results']['0']);

如果这仍然不起作用，您可能需要设置一个 var 并获取命名列表，如下所示：

var result = response['results'][0];
return Invoice.fromJson(result['pembelian']);

代码可能无法完美运行，但您可能希望绕过这一行，它会按预期运行