时间戳

首页 > 解决方案 > 颤振列表视图构建器中的动态 JSON 数组

flutter - 颤振列表视图构建器中的动态 JSON 数组

问题描述

我有一个具有以下结构的 JSON 响应。

[
  {
    "branch": "B1",
    "xyz": "0",
    "ABC": "2",
    "MN": "2"
  },
  {
    "branch": "B2",
    "xyz": "0",
    "ABC": "0",
    "MN": "0"
  },
]

在此，只有分支是恒定的。键的数量是动态的（表的列名）。根据我的要求，我不断通过添加列来更改表格。我想在我的列表视图中显示这些，每个分支都有一个项目。

我使用了以下列表视图构建器

 ListView.builder(
  itemCount: snapshot.data?.length ?? 0,
  itemBuilder: (BuildContext context, int index) {
  var branch= snapshot.data[index]["branch"];// This is fine as branch is constant                     
  return Myownclass(branch:branch,);
   }),

如何获取这些动态键（xyx、ABC、MN）及其值并使用自定义小部件显示。

标签： flutter

解决方案

我在这里创建了一个 dartpad，所以你可以使用下面的代码。

该代码使用索引进入 json 对象的每个部分，然后将其提供给 MyOwnClass，这是一个有状态的小部件，它从 json 对象（在 makeWidgetChildren 中）提取键并使用提取的键返回小部件列表。并使用键构建 listView。

我还允许在每个对象中使用不同数量的键，以使其尽可能通用。

最后，我更新了我的答案以模拟从另一个来源（例如 API 调用）获取数据。MyApp 中调用的 getJsonResponse() 旨在模拟此调用，以及如何将其传递给 MakeList()

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(body: MakeList(json: getJsonResponse())),
    );
  }
  getJsonResponse(){  return [  
    {"branch": "B1", "xyz": "0", "ABC": "2", "MN": "2", "XYZ": "2"},
    {"branch": "B2", "xyz": "0", "ABC": "0", "MN": "0", "another": "sugar"},
    {"branch": "B3", "xyz": "1", "ABC": "1"},
    {"branch": "B4", "xyz": "0", "ABC": "5", "MN": "69"},
  ];}
}

class MakeList extends StatelessWidget {
final List<Map<String,String>> json;
  MakeList({this.json});

  @override
  Widget build(BuildContext context) {
    return ListView.builder(
      itemCount: json.length,
      itemBuilder: (BuildContext context, int index) {
        return MyOwnClass(jsonObject: json[index]);
      },
    );
  }
}

class MyOwnClass extends StatefulWidget {
  final Map<String, String> jsonObject;

  MyOwnClass({this.jsonObject});

  @override
  _MyOwnClassState createState() => _MyOwnClassState();
}

class _MyOwnClassState extends State<MyOwnClass> {
  @override
  Widget build(BuildContext context) {
    return ListTile(
      title: Container(
        child: Row(children: makeWidgetChildren(widget.jsonObject)),
      ),
    );
  }

  List<Widget> makeWidgetChildren(jsonObject) {
    List<Widget> children = [];
    jsonObject.keys.forEach(
      (key) => {
        children.add(
          Padding(
              child: Text('${jsonObject[key]}'), padding: EdgeInsets.all(8.0)),
        )
      },
    );
    return children;
  }
}

推荐阅读