如何在顫動中映射“轉換”Json？

我是 Flutter 的新手，我有 2 個問題：

1. 如何訪問此 Json 中的資料，例如獲取 2 串列中的電話名稱
2. 如何使用此 Json 使用 Builder 方法構建 ListView，我查看并發現我必須使用某種庫 .. 我不能手動執行嗎？

  var mblist = [{
    'name': 'Note 10',
    'camera': '48 MPX',
    'ram': '8GB',
    'price': '20 000,00 DZD',
    'image':
        'https://images.frandroid.com/wp-content/uploads/2019/06/samsung-galaxy-note-10-2019-frandroid.png'
  }
,
    {
      'name': 'Note 20',
      'camera': '48 MPX',
      'ram': '8GB',
      'price': '20 000,00 DZD',
      'image':
          'https://images.frandroid.com/wp-content/uploads/2019/06/samsung-galaxy-note-10-2019-frandroid.png'
    }
  ];

uj5u.com熱心網友回復：

問題1：如何獲取手機名稱？

第一部手機名稱：mblist[0]['name']

所有電話的名稱串列：mblist.map((phone) => phone['name']).toList()

Question2：如何使用json list構建ListView？

在小部件中處理資料的最佳方式通常是使用基于類的模型物件。您可以創建一個類模型并從 json 資料中實體化它的一個物件，并在您的顫振小部件中傳遞該物件以創建您需要的任何型別的 UI。

例如，您提到的那個 json 串列的模型可以是這樣的：

class Model {
  String? name;
  String? camera;
  String? ram;
  String? price;
  String? image;

  Model({this.name, this.camera, this.ram, this.price, this.image});

  Model.fromJson(Map<String, dynamic> json) {
    name = json['name'];
    camera = json['camera'];
    ram = json['ram'];
    price = json['price'];
    image = json['image'];
  }
}

您可以將串列轉換為模型物件串列，如下所示：

List<Model> modelMbList = mblist.map((mb) => Model.fromJson(mb)).toList();

之后，您可以像這樣創建 ListView：

ListView.builder(
  itemCount: modelMbList.length,
  itemBuilder: (context, index) {
    return ListTile(
      title: Text(modelMbList[index].name??''),
    );
  },
)

uj5u.com熱心網友回復：

我相信 dart:convert 庫直截了當，足以滿足您的操作需求。它即將作為標準庫出現。

uj5u.com熱心網友回復：

@Mahdi 的答案是正確的，但這是一個完整的示例，其中包含 UI 中的所有引數。

class Phone {
  final String name;
  final String camera;
  final String ram;
  final String price;
  final String imageUrl;
  Phone({
    required this.name,
    required this.camera,
    required this.ram,
    required this.price,
    required this.imageUrl,
  });

  factory Phone.fromMap(Map<String, dynamic> map) {
    return Phone(
      name: map['name'] as String? ?? '',
      camera: map['camera'] as String? ?? '',
      ram: map['ram'] as String? ?? '',
      price: map['price'] as String? ?? '',
      imageUrl: map['image'] as String? ?? '',
    );
  }
}

完成頁面。

class TestPage extends GetView<AuthController> {
  const TestPage({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.spaceEvenly,
          children: [
            Expanded(
              child: ListView.builder(
                itemCount: mblist.length,
                itemBuilder: (context, index) {
                  final phone = Phone.fromMap(mblist[index]);
                  return ListTile(
                    title: Text(phone.name),
                    subtitle: Row(
                      children: [
                        Text(phone.price),
                        const SizedBox(width: 10),
                        Text(phone.ram),
                      ],
                    ),
                    trailing:
                        Image.network(phone.imageUrl, width: 50, height: 50),
                  );
                },
              ),
            ),
          ],
        ),
      ),
    );
  }
}

uj5u.com熱心網友回復：

Flutter 到包json_serializable，build_runner它可以幫助您為 Api 呼叫和其他 json 物件創建 dart 模型。

這將為您的專案減少大量樣板代碼。

https://pub.dev/packages/json_serializable

https://pub.dev/packages/build_runner

標籤：json 扑 api 镖

上一篇：無法將提取的json插入資料框列

下一篇：C#中的陣列Json反序列化問題