如何遍历属于键值的对象数组-Flutter [英] How can I iterate over an array of objects which belong to a key value - Flutter

查看:891
本文介绍了如何遍历属于键值的对象数组-Flutter的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

我有一个称为锚的数据列表,该列表具有指向详细屏幕的链接.每个锚都有分布中心,分布中心是嵌套对象的数组.因此我能够将每个锚点的ID解析到一个详细的屏幕上,并且 Oid 我要遍历子项(即锚点的分发中心)遇到了挑战.请任何人帮助我,我能够将属于锚的所有值拉到详细屏幕,但是如何在详细屏幕中循环嵌套值是一个问题.嵌套值是下面数组中的DistributionCentres.请任何人可以帮助我继续学习有关颤振的知识吗?

I have a list of data called anchors that has a link to a detailed screen. And each anchor has distribution centers which are an array of nested objects. so I was able to parse an id of each of the anchors to a detailed screen and Oid I am having a challenge to loop through the children i.e the distribution centers of the anchors. Please can anyone help me, I was able to pull all the values belonging to an anchor to the detailed screen but how to loop through the nested values in the detailed screen is the problem. the nested values are DistributionCentres in the array below. please can anyone help me still learning more on flutter?

json数组:

{
 "Anchors": [
    {
      "Oid": 11,
      "Name": "MAIZE ASSOCIATION OF NIGERIA",
      "Acronym": "MAAN",
      "DistributionCentres": [
        {
          "Oid": 11,
          "Name": "Logo Centre (Zone A)",
          "Address": "Private Warehouse, Ugba, Logo LGA"
        },
        {
          "Oid": 12,
          "Name": "Makurdi Centre (Zone B)",
          "Address": "Ministry of Agric, Makurdi "
        },
        {
          "Oid": 13,
          "Name": "Oturkpo Centre (Zone C)",
          "Address": "Private Warehouse, Oturkpo"
        },
        {
          "Oid": 15,
          "Name": "Borno MAAN centre",
          "Address": "Bolori Store, Flavour Mill, Behind Vita Foam, Maiduguri"
        },
        {
          "Oid": 18,
          "Name": "Bauchi Centre",
          "Address": "BASPD, Dass Road, Bauchi"
        }
      ],
      "NoOfDistributionCentres": 5
    },
    {
      "Oid": 2,
      "Name": "MAIZE GROWERS, PROCESSORS AND MARKETERS ASSOCIATION OF NIGERIA",
      "Acronym": "MAGPAMAN",
      "DistributionCentres": [
        {
          "Oid": 2,
          "Name": "Guma Centre",
          "Address": "P 32, 2nd Avenue Federal Housing Estate, N/Bank, Makurdi"
        },
        {
          "Oid": 3,
          "Name": "Logo Centre",
          "Address": "Terhemen Akema Storage Facility, Ugba, Logo LGA"
        },
        {
          "Oid": 5,
          "Name": "Oturkpo Centre",
          "Address": "Grain Store, Lower Benue Okele Project, Otukpo"
        },
        {
          "Oid": 6,
          "Name": "Gboko Centre",
          "Address": "K3 New Road, Opposite former coca cola plant. Solar Schools Street, Gboko"
        },
        {
          "Oid": 7,
          "Name": "Gwer East Centre",
          "Address": "Ahua Shardye's Warehouse, Behind Sylkan Filling Station, Ikpayongo , G/East LGA"
        },
        {
          "Oid": 8,
          "Name": "Kwande Centre",
          "Address": "KM 3, Adagi Road, Adikpo"
        },
        {
          "Oid": 9,
          "Name": "Ohimini Centre",
          "Address": "Ajoga Oglewu, Ohimini"
        },
        {
          "Oid": 10,
          "Name": "Oju Centre",
          "Address": "Behind Town Hall, Ohuhu owo, Oju LGA"
        }
      ],
      "NoOfDistributionCentres": 8
    }
  ],
}

具有链接到详细屏幕的锚页面:

Anchors page with a link to the detailed screen:

import 'package:erg_app/AnchorDetails.dart';
import 'package:erg_app/Details.dart';
import 'package:erg_app/StockPage.dart';
import 'package:flutter/material.dart';
import 'package:erg_app/Widgets/nav-drawer.dart';
import 'dart:convert';
import 'package:shared_preferences/shared_preferences.dart';

void main() => runApp(MaterialApp(
      home: AnchorsPage(),
    ));

class AnchorsPage extends StatefulWidget {
  @override
  _MyHomeState createState() => _MyHomeState();
}

class _MyHomeState extends State<AnchorsPage> {
  var user;
  var userData;
  List <dynamic> anchors = [];
  @override
  void initState() {
    _getUserAnchor();
    super.initState();
  }

  _getUserAnchor() async {
    SharedPreferences localStorage = await SharedPreferences.getInstance();
    var userJson = localStorage.getString('loginRes');
    user = json.decode(userJson);
    setState(() {
      anchors = user['Anchors'];
    });
    print(anchors);
    setState(() {
      userData = anchors;
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      drawer: NavDrawer(),
      appBar: AppBar(
        title: Text('Anchors Details'),
        iconTheme: IconThemeData(color: Colors.white),
        backgroundColor: Colors.green,
      ),
      body: Container(
        padding: const EdgeInsets.fromLTRB(10, 30, 10, 10),
        child: ListView(
          children: <Widget>[
            Row(
              mainAxisAlignment: MainAxisAlignment.spaceAround,
              children: <Widget>[
                Icon(Icons.card_membership,
                    size: 35, color: Colors.orange[400]),
                Text(
                  'Assigned Anchors',
                  style: TextStyle(color: Colors.orange[400], fontSize: 25),
                ),
              ],
            ),
            ListView.builder(
                shrinkWrap: true,
                itemCount: anchors.length,
                physics: NeverScrollableScrollPhysics(),
                itemBuilder: (BuildContext context, int i) {
                  return Padding(
                    padding: const EdgeInsets.all(10.0),
                    ////////////// 1st card///////////

                    child: Card(
                      elevation: 4.0,
                      color: Colors.grey[100],
                      margin: EdgeInsets.only(
                          left: 10, right: 10, top: 20, bottom: 10),
                      shape: RoundedRectangleBorder(
                          borderRadius: BorderRadius.circular(10)),
                      child: Container(
                        padding: EdgeInsets.only(left: 15, top: 20, bottom: 10),
                        width: MediaQuery.of(context).size.width,
                        child: Column(
                          crossAxisAlignment: CrossAxisAlignment.start,
                          children: <Widget>[
                            Row(
                              children: <Widget>[
                                Padding(
                                  padding: const EdgeInsets.all(8.0),
                                  child: Container(
                                      width: 50.0,
                                      height: 50.0,
                                      decoration: new BoxDecoration(
                                          shape: BoxShape.circle,
                                          image: new DecorationImage(
                                              fit: BoxFit.cover,
                                              image: AssetImage(
                                                  'assets/images/user.png')))),
                                ),
                                SizedBox(
                                  width: 20,
                                ),
                                Text(
                                  anchors[i]['Acronym'],
                                  textAlign: TextAlign.center,
                                  style: TextStyle(
                                    color: Color(0xFF9b9b9b),
                                    fontSize: 20,
                                    decoration: TextDecoration.none,
                                    fontWeight: FontWeight.normal,
                                  ),
                                ),
                              ],
                            ),
                            Container(width: 10),
                            Row(
                              children: <Widget>[
                                Padding(
                                  padding:
                                      const EdgeInsets.only(left: 10, top: 10),
                                  child: Text(
                                    'Allocated Farmers:',
                                    textAlign: TextAlign.left,
                                    style: TextStyle(
                                      color: Color(0xFF9b9b9b),
                                      fontSize: 14.0,
                                      decoration: TextDecoration.none,
                                      fontWeight: FontWeight.normal,
                                    ),
                                  ),
                                ),
                                Padding(
                                  padding:
                                      const EdgeInsets.only(left: 70, top: 12),
                                  child: Text(
                                    anchors[i]['Oid'].toString(),
                                    textAlign: TextAlign.left,
                                    style: TextStyle(
                                      color: Colors.grey[700],
                                      fontSize: 14.0,
                                      decoration: TextDecoration.none,
                                      fontWeight: FontWeight.normal,
                                    ),
                                  ),
                                ),
                              ],
                            ),
                            
                            
                            Container(
                              height: 20,
                            ),
                            Row(
                              children: <Widget>[
                                /////////// Buttons /////////////

                                Padding(
                                  padding: const EdgeInsets.all(10.0),
                                  child: FlatButton(
                                          child: Padding(
                                            padding: EdgeInsets.only(
                                                top: 8,
                                                bottom: 8,
                                                left: 10,
                                                right: 8),
                                            child: Text(
                                              'View Details',
                                              textDirection: TextDirection.ltr,
                                              style: TextStyle(
                                                color: Colors.white,
                                                fontSize: 15.0,
                                                decoration: TextDecoration.none,
                                                fontWeight: FontWeight.normal,
                                              ),
                                            ),
                                          ),
                                          color: Colors.blueGrey,
                                          shape: new RoundedRectangleBorder(
                                              borderRadius:
                                                  new BorderRadius.circular(
                                                      20.0)),
                                          onPressed: () {
                                            Navigator.push(
                                                context,
                                                new MaterialPageRoute(
                                                    builder: (context) =>
                                                        detailsPage(value : anchors)));
                                          },
                                        ),
                                ),

                                /////////// End of Buttons /////////////
                              ],
                            ),
                          ],
                        ),
                      ),
                    ),
                  );
                })
          ],
        ),
      ),
    );
  }
}

详细屏幕:

  import 'package:flutter/material.dart';


class detailsPage extends StatefulWidget {
  dynamic value;
  detailsPage({Key key, @required this.value}) : super(key: key);
  @override
  _detailsPageState createState() => _detailsPageState(value);
}

class _detailsPageState extends State<detailsPage> {

  dynamic value;
  _detailsPageState(this.value);
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("Anchors Details Page"),
        iconTheme: IconThemeData(color: Colors.white),
        backgroundColor: Colors.green,
      ),
      // body: Center(
      //   child: Text(
      //     value[1]['Name'].toString(),
      //   ),
      // ),


       body: Column(
     children: <Widget>[
        Padding(
          padding: const EdgeInsets.all(8.0),
          child: Card(
            child: Column(
              children: <Widget>[
                Text(value[1]['Name']),
                Text(value[1]['Oid'].toString()),
                //Text(value [1]['DistributionCentres']),
              ],
            ),
          ),
        ),
    ],
   ),
    );
  }
}

推荐答案

在这种情况下,我建议您使用数据类.

I recommend you to use data classes for such situations.

import 'package:flutter/material.dart';

List<Anchor> _parseAnchors(Map<String, dynamic> map) {
  final anchors = <Anchor>[];
  for (var anchorMap in map['Anchors']) {
    final anchor = Anchor.fromMap(anchorMap);
    anchors.add(anchor);
  }
  return anchors;
}

class Anchor {
  final int oId;
  final String name;
  final String acronym;
  final List<DistributionCenter> distributionCenters;

  const Anchor({
    @required this.oId,
    @required this.name,
    @required this.acronym,
    @required this.distributionCenters,
  });

  factory Anchor.fromMap(Map<String, dynamic> map) {
    final distributionCenters = <DistributionCenter>[];
    for (var distribution in map['DistributionCentres']) {
      final distributionCenter = DistributionCenter.fromMap(distribution);
      distributionCenters.add(distributionCenter);
    }

    return Anchor(
      oId: map['Oid'] as int,
      name: map['Name'] as String,
      acronym: map['Acronym'] as String,
      distributionCenters: distributionCenters,
    );
  }
}

class DistributionCenter {
  final int id;
  final String name;
  final String address;

  const DistributionCenter({
    @required this.id,
    @required this.name,
    @required this.address,
  });

  factory DistributionCenter.fromMap(Map<String, dynamic> map) {
    return DistributionCenter(
      id: map['Oid'] as int,
      name: map['Name'] as String,
      address: map['Address'] as String,
    );
  }
}

class AnchorPage extends StatelessWidget {
  // details page
  final Anchor anchor;

  @override
  const AnchorPage({Key key, @required this.anchor}) : super(key: key);

  Widget build(BuildContext context) {
    return Scaffold(
      body: Container(
        child: Text(anchor.name),
      ),
    );
  }
}

class AnchorsPage extends StatefulWidget {
  const AnchorsPage({Key key}) : super(key: key);

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

class _AnchorsPageState extends State<AnchorsPage> {
  static const anchorsMap = {
    "Anchors": [
      {
        "Oid": 11,
        "Name": "MAIZE ASSOCIATION OF NIGERIA",
        "Acronym": "MAAN",
        "DistributionCentres": [
          {
            "Oid": 11,
            "Name": "Logo Centre (Zone A)",
            "Address": "Private Warehouse, Ugba, Logo LGA"
          },
          {
            "Oid": 12,
            "Name": "Makurdi Centre (Zone B)",
            "Address": "Ministry of Agric, Makurdi "
          },
          {
            "Oid": 13,
            "Name": "Oturkpo Centre (Zone C)",
            "Address": "Private Warehouse, Oturkpo"
          },
          {
            "Oid": 15,
            "Name": "Borno MAAN centre",
            "Address": "Bolori Store, Flavour Mill, Behind Vita Foam, Maiduguri"
          },
          {
            "Oid": 18,
            "Name": "Bauchi Centre",
            "Address": "BASPD, Dass Road, Bauchi"
          }
        ],
        "NoOfDistributionCentres": 5
      },
      {
        "Oid": 2,
        "Name":
            "MAIZE GROWERS, PROCESSORS AND MARKETERS ASSOCIATION OF NIGERIA",
        "Acronym": "MAGPAMAN",
        "DistributionCentres": [
          {
            "Oid": 2,
            "Name": "Guma Centre",
            "Address":
                "P 32, 2nd Avenue Federal Housing Estate, N/Bank, Makurdi"
          },
          {
            "Oid": 3,
            "Name": "Logo Centre",
            "Address": "Terhemen Akema Storage Facility, Ugba, Logo LGA"
          },
          {
            "Oid": 5,
            "Name": "Oturkpo Centre",
            "Address": "Grain Store, Lower Benue Okele Project, Otukpo"
          },
          {
            "Oid": 6,
            "Name": "Gboko Centre",
            "Address":
                "K3 New Road, Opposite former coca cola plant. Solar Schools Street, 
    Gboko"
          },
          {
            "Oid": 7,
            "Name": "Gwer East Centre",
            "Address":
                "Ahua Shardye's Warehouse, Behind Sylkan Filling Station, Ikpayongo , 
  G/East LGA"
          },
          {
            "Oid": 8,
            "Name": "Kwande Centre",
            "Address": "KM 3, Adagi Road, Adikpo"
          },
          {
            "Oid": 9,
            "Name": "Ohimini Centre",
            "Address": "Ajoga Oglewu, Ohimini"
          },
          {
            "Oid": 10,
            "Name": "Oju Centre",
            "Address": "Behind Town Hall, Ohuhu owo, Oju LGA"
          }
        ],
        "NoOfDistributionCentres": 8
      }
    ],
  };
  final _anchors = <Anchor>[];

  @override
  Widget build(BuildContext context) {
    // now you can use the anchors list here
    return Scaffold(
      body: ListView.builder(
        itemCount: _anchors.length,
        itemBuilder: (context, index) {
          final anchor = _anchors[index];
          return ListTile(
            title: Text(anchor.name),
            subtitle: Text(anchor.acronym),
            trailing: Text(anchor.distributionCenters?.length?.toString()),
            onTap: () {
              Navigator.push(
                context,
                MaterialPageRoute(
                  builder: (context) => AnchorPage(anchor: anchor),
                ),
              );
            },
          );
        },
      ),
    );
  }

  @override
  void initState() {
    super.initState();
    final anchors = _parseAnchors(anchorsMap);
    _anchors.addAll(anchors);
  }
}

这篇关于如何遍历属于键值的对象数组-Flutter的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!

查看全文
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆