如何映射“转换”颤振中的 Json？

Question

我是 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'
    }
  ];

Answer 1

问题1：如何获取手机名称？

第一个电话的名称：mblist[0]['name']

所有电话的名称列表：mblist.map((phone) =>phone['name'])。 toList()

问题2：如何使用json列表构建ListView？

在小部件中处理数据的最佳方法通常是使用基于类的模型对象。您可以创建一个类模型，从 json 数据实例化它的一个对象，然后将该对象传递到您的 flutter 小部件中以创建您需要的任何类型的 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??''),
    );
  },
)

Answer 2

在 flutter 中，有包 json_serialized 和 build_runner ，它们可以帮助您为 Api 调用和其他 json 对象创建 dart 模型。

这将为您的项目减少大量样板代码。

https://pub.dev/packages/json_serialized

https://pub.dev/packages/build_runner

Answer 3

@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 StatelessWidget {
  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),
                  );
                },
              ),
            ),
          ],
        ),
      ),
    );
  }
}

Answer 4

我相信 dart:convert 库直接且足以满足您的操作。它将作为标准库出现。