flutter - Flutter 中的卡片 ListView

Question

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

我需要创建一个 flutter ListView ，其中包含来自以下 JSON 数据的卡片，这样，在卡片上只有名称字段可见，而当我们单击卡片时，ID 和名称都应该在新页面上可见。

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

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

Answer 1

获取获取的 JSON 并将其放入 map 中。我创建了一个类来轻松处理它(添加获取数据函数)。获取数组数据并将它们放入 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))),
    );
  }
}