android - 在 flutter 中仅显示产品名称列表，使用 json 格式的 woocommerce api 数据

Question

我能够在控制台中以 json 格式获取和打印数据，并且能够在 flutter 应用程序中以列表格式显示整个数据体。但我不知道如何在列表中只显示一个特定的键及其值。它是 map 列表。我已从此代码中删除消费者 key 和 secret 。

import 'dart:async';
import 'dart:convert';

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

void main(){
  runApp(MaterialApp(
    home: CustomHome(),
  ));
}

class CustomHome extends StatefulWidget {
  @override
  _CustomHomeState createState() => _CustomHomeState();
}

class _CustomHomeState extends State<CustomHome> {

  List data;

  Future<String> getData() async{
    var response = await http.get('https://jbaat.com/wp-json/wc/v3/products/?consumer_key=&consumer_secret=');

    setState(() {
      var converted = jsonDecode(response.body);
      data = converted;
    });
  }


  @override
  void initState() {
    // TODO: implement initState
    super.initState();
    this.getData();
  }

  @override
  Widget build(BuildContext context) {
    print(data);
    return Scaffold(
      body: ListView.builder(
          itemCount: data == null ? 0 : data.length,
          itemBuilder: (BuildContext context, int index) {
            return Container(
              child: Card(
                child: Padding(
                  padding: const EdgeInsets.all(8.0),
                  child: Text('$data'),
                ),
              ),
            );
          }),
    );
  }
}

下面是回复

 [{id: 493, name: Bas 5 Min White Half Sleeve T-Shirt, slug: bas-5-min-white-half-sleeve-t-shirt, permalink: https://www.jbaat.com/product/bas-5-min-white-half-sleeve-t-shirt/, date_created: 2019-12-14T23:39:08, date_created_gmt: 2019-12-14T18:09:08, date_modified: 2019-12-14T23:48:01, date_modified_gmt: 2019-12-14T18:18:01, type: variable, status: publish, featured: false, catalog_visibility: visible, description: , short_description: , sku: , price: 500.00, regular_price: , sale_price: , date_on_sale_from: null, date_on_sale_from_gmt: null, date_on_sale_to: null, date_on_sale_to_gmt: null, price_html: <span class="woocommerce-Price-amount amount"><span class="woocommerce-Price-currencySymbol">&#8377;</span>500.00</span>, on_sale: false, purchasable: true, total_sales: 0, virtual: false, downloadable: false, downloads: [], download_limit: -1, download_expiry: -1, external_url: , button_text: , tax_status: taxable, tax_class: , manage_stock: false, stock_quantity: null, stock_status: instock, backorders: no, 

Answer 1

Jbaat，我建议为您的响应数据创建一个模型，并相应地使用来自每个项目实例的值。很少有在线转换器可以将您的 json 响应转换为 Dart 模型，这里是一个 - https://javiercbk.github.io/json_to_dart/ .下面是一个基于您的响应数据的简单示例，

class Items {
  final List<Items> items;

  Items({this.items});

  factory Items.fromJson(List<dynamic> json) {
    List<Items> itemList = json.map((i) => Items.fromJson(i)).toList();

    return Items(
        items: itemList
    );
  }
}

class Item {
  final int id;
  final String name;
  ......

  Item({this.id, this.name,.....});

  factory Item.fromJson(Map<String, dynamic> json) {
    return Item(
        id: json['id'],
        name: json['name']
        ......
    );
  }
}

然后你的 getData() 将是，

Future<Items> getData() async{
  var response = await http.get('https://jbaat.com/wp-json/wc/v3/products/?consumer_key=&consumer_secret=');

  return Items.fromJson(json.decode(response.body)).items;
}

您现在应该拥有可用于获取特定项目信息的 Item 列表。您还应该使用 FutureBuilder 来调用您的 getData() 而不是在 initState 中调用它，以确保在像这样构建小部件之前数据可用，

@override
  Widget build(BuildContext context) {
    return FutureBuilder(
        future: getData(),
        builder: (context, snapshot) {
          if (snapshot.hasData) {
            return Scaffold(
              body: ListView.builder(
                  itemCount: snapshot.data.length,
                  itemBuilder: (BuildContext context, int index) {
                    Item item = snapshot.data[index]; //Your item
                    return Container(
                      child: Card(
                        child: Padding(
                          padding: const EdgeInsets.all(8.0),
                          child: Text(item.name),
                        ),
                      ),
                    );
                  }),
            );
          } else {
            return Center(child: CircularProgressIndicator());
          }
        });
  }

希望这对您有所帮助。祝你好运!