Question

我熟悉从字符串数组创建ListView，但需要使用JSON数据的帮助

我需要创建一个颤振列表视图，其中包含来自以下JSON数据的卡片，这样，在卡片上只有姓名字段才可见，而当我们单击卡片时，id和姓名在新页面上都应该可见。

如何将JSON对象附加到可点击的卡上？

{
  "data": [
    {
      "id": 111,
      "name": "abc"
    },
    {
      "id": 222,
      "name": "pqr"
    },
    {
      "id": 333,
      "name": "abc"
    }
  ]
}

Answer 1

将提取的JSON放入地图中。我创建了一个class来轻松处理它（添加访存数据功能）。取出数组数据并将其放入List中。

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatefulWidget {
  @override
  _MyAppState createState() => new _MyAppState();
}

class _MyAppState extends State<MyApp> {
  @override
  Widget build(BuildContext context) {
    return new MaterialApp(
      home: Home(),
    );
  }
}

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

class Data {
  Map fetched_data = {
    "data": [
      {"id": 111, "name": "abc"},
      {"id": 222, "name": "pqr"},
      {"id": 333, "name": "abc"}
    ]
  };
  List _data;

//function to fetch the data

  Data() {
    _data = fetched_data["data"];
  }

  int getId(int index) {
    return _data[index]["id"];
  }

  String getName(int index) {
    return _data[index]["name"];
  }

  int getLength() {
    return _data.length;
  }
}

class _HomeState extends State<Home> {
  Data _data = new Data();

  @override
  Widget build(BuildContext context) {
    return SafeArea(
      child: Scaffold(
        backgroundColor: Colors.blueGrey,
        body: ListView.builder(
          padding: const EdgeInsets.all(5.5),
          itemCount: _data.getLength(),
          itemBuilder: _itemBuilder,
        ),
      ),
    );
  }

  Widget _itemBuilder(BuildContext context, int index) {
    return InkWell(
      child: Card(
        child: Center(
          child: Text(
            "${_data.getName(index)}",
            style: TextStyle(
              fontWeight: FontWeight.w500,
              color: Colors.orange,
            ),
          ),
        ),
      ),
      onTap: () => MaterialPageRoute(
          builder: (context) =>
              SecondRoute(id: _data.getId(index), name: _data.getName(index))),
    );
  }
}

Answer 2

第1步

创建模型，然后将此json放在此处：https://javiercbk.github.io/json_to_dart/

{
   "id": 111,
   "name": "abc"
}

然后将模型放入您的项目中

第2步

将数据转换为模型列表

List<YOURMODEL> models = data.map((Map item)=> YOURMODEL.fromJson(item)).toList();

第3步

使用此列表创建列表视图小部件

ListView.builder(
  itemCount: models.length, 
  itemBuilder: (context, index) {
    return Card(child:Text(models[index].name));
  },
),

Answer 3

创建模型，

class MyJsonData{
  List<Data> data;

  MyJsonData({this.data});

  MyJsonData.fromJson(Map<String, dynamic> json) {
    if (json['data'] != null) {
      data = new List<Data>();
      json['data'].forEach((v) {
        data.add(new Data.fromJson(v));
      });
    }
  }
}

class Data {
  int id;
  String name;

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

  Data.fromJson(Map<String, dynamic> json) {
    id = json['id'];
    name = json['name'];
  }
}

然后您可以简单地使用

var jsonData = new MyJsonData.fromJson(jsonDecode(urjsonhere));

jsonData.data[1].name; //value will be abc

您必须导入convert才能使用jsonDecode

import 'dart:convert';

来自对象的Flutter中的卡列表视图

3 个答案: