Android Studio 如何在flutter中显示列表

zed5wv10  于 2022-11-25  发布在  Android
关注(0)|答案(3)|浏览(169)

你好,我想问一下如何在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),
                              );
                            }),

对于invoice类,您可以从此处看到https://app.quicktype.io?share=8uxohFwef3SQwLcMTsdy
我只想从pembelian开始显示列表
有人知道这个代码有什么问题吗?谢谢

kq4fsx7k

kq4fsx7k1#

您必须将此行从:

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,
      };
}
yks3o0rb

yks3o0rb2#

您的列表位于另一个列表中,而该列表位于另一个命名列表中,因此您可能需要更改代码:

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

对此:

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

如果仍然不起作用,您可能需要设置一个var并获得命名列表,如下所示:

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

代码可能无法完美运行,但您可能希望绕过此行,它将按您预期的方式运行

wd2eg0qa

wd2eg0qa3#

使用Listview.builder方法并在其源代码中传递一个数组列表

相关问题