Flutter 中的卡列表視圖來自 Object

Question

我熟悉從字符串數組創建 ListView 但需要幫助使用 JSON 數據

我需要創建一個 flutter 列表視圖，其中包含來自以下 JSON 數據的卡片，這樣，在卡片上只有名稱字段可見，而當我們單擊卡片時，id 和名稱都應該在新頁面上可見。

如何將 JSON Object 附加到可點擊卡？

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

Answer 1

取出取來的JSON並將其放入 map 中。 我創建了一個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

創建你的 model，把這個 json 放在這里： https://javiercbk.ZBF215181B514052dart24BAZio/4052dart24BAZio3

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

然后將 model 放入您的項目中

第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

創建一個 model，

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';