时间戳

首页 > 解决方案 > Flutter：无法使用 json 在列表视图中获取产品

android - Flutter：无法使用 json 在列表视图中获取产品

问题描述

我想在其中显示列表的主页，应用程序中只显示一个项目，我真的不知道该怎么做我是新来的颤振和 json 解析对我来说太难了。如果有人也可以解释，那就太好了

class Home extends StatefulWidget {
  @override
  State<Home> createState() => _HomeState();
}

class _HomeState extends State<Home> {
  // final dummyList = List.generate(20, (index) => CatModel.items[0]);

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

  loadData() async{
    final String catalogJson =await rootBundle.loadString("asset/catalog.json");
    final decodedJson = jsonDecode(catalogJson);
    var productData = decodedJson["products"];

    CatModel.items = List.from(productData).map<Item>((item) => Item.fromMap(item)).toList();
    setState(() {});
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Catalog App'),
      ),
      body: Padding(
        padding: EdgeInsets.all(20),
        child: ListView.builder(
          itemCount: CatModel.items.length,
          itemBuilder: (context, index) {
            return ItemWidget(item: CatModel.items[index]);
          },
        ),
      ),
      drawer: MyDrawer(),
    );
  }
}

我的模型类，CatModel 中的细节正在显示，没有别的。只有一个项目，我想展示所有其他产品项目

class Item {
  // final String name;
  final double tid;
  final double price;
  final double amount;
  final double date;

  Item(
      {
      required this.tid,
      required this.price,
      required this.amount,
      required this.date});

  factory Item.fromMap(Map<String, dynamic> map){
    return  Item(
      tid: map["tid"],
      price: map["price"],
      amount: map["amount"],
      date: map["date"],
    );
  }

  toMap() => {
    "tid" : tid,
    "price" : price,
    "amount" : amount,
    "date" : date,
  };

}

class CatModel {
  static List<Item> items = [
    Item(tid: 123, price: 540, amount: 111, date: 101)
  ];
}

我的项目小部件类

class ItemWidget extends StatelessWidget {
  final Item item;

  ItemWidget({required this.item}) : assert(item != null);

  @override
  Widget build(BuildContext context) {
    return Card(
      child: ListTile(
        onTap: ()=>print("${item.tid}pressed"),
        leading: Text((item.tid).toString()),
        title: Text(item.date.toString()),
        subtitle: Text(
          "\$ ${item.price}",
          style: TextStyle(color: Colors.black),
        ),
        trailing: Text(item.amount.toString(), textScaleFactor: 1.2),
      ),
    );
  }
}

我的 Json 数据

{
   "products": [
      {
         "tid": 6,
         "price": 3190.00,
         "amount": 0.24843000,
         "date": 1399210160
      },
      {
         "price": 3195.00,
         "tid": 7,
         "amount": 0.08800000,
         "date": 1399210708
      },
      {
         "price": 3050.01,
         "tid": 9,
         "amount": 0.80000000,
         "date": 1399213161
      },
      {
         "price": 3195.00,
         "tid": 10,
         "date": 1399214944,
         "amount": "0.05000000"
      },
      {
         "date": 1399214983,
         "amount": 0.00800000,
         "tid": 17,
         "price": "3195.00"
      }
   ]
}

标签： androidiosflutterdart

解决方案

主要问题来自(asset/catalog.json)最后两项的 JSONprice是String数据而不是 double 或 int，您可以""从值中删除。

那些是

 {
         "price": 3195.00,
         "tid": 10,
         "date": 1399214944,
         "amount": "0.05000000"
      },
      {
         "date": 1399214983,
         "amount": 0.00800000,
         "tid": 17,
         "price": "3195.00"
      }

至

{
         "price": 3195.00,
         "tid": 10,
         "date": 1399214944,
         "amount": 0.05000000
      },
      {
         "date": 1399214983,
         "amount": 0.00800000,
         "tid": 17,
         "price": 3195.00
      }

推荐阅读