我如何使用一个键来循环存储在我的 sharedpreference 中的数据 - Flutter答案

【问题标题】：How can I Loop through data that is stored in my sharedpreference with a key in - Flutter我如何使用一个键来循环存储在我的 sharedpreference 中的数据 - Flutter
【发布时间】：2020-06-23 17:13:22
【问题描述】：

这是帮助我从共享偏好存储中获取数据的功能：


 var user;
 var userData;
 var anchors; 
  @override
  void initState() {
    _getUserAnchor();
    super.initState();
  }

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

这是应该显示数据的小部件：

@override
  Widget build(BuildContext context) {
    return Scaffold(
      drawer: NavDrawer(),
      appBar: AppBar(
        title: Text('Dashboard'),
        iconTheme: IconThemeData(color: Colors.white),
        backgroundColor: Colors.green,
      ),
      backgroundColor: Colors.white,
      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),
                ),
                Icon(Icons.notifications_none, size: 35, color: Colors.white)
              ],
            ),
            Column(
                children: persons.map((p) {
              return personDetailCard(p); //this is where I want to display the data
            }).toList())
          ],
        ),
      ),
    );
  }

这是成功登录后 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": 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"
        }
      ]
    }
  ]
}

所以我想显示名称、首字母缩写词并计算 DistributionCentres，但我不知道该怎么做。有人可以帮助我吗？我正在使用共享首选项，因为有数字锚分配给登录用户。最初，我可以通过在文件中硬编码一个数组来做到这一点，但我无法通过共享首选项来实现这一点。请问有人可以帮我吗？请。如果它有效，那么我将摆脱硬编码的 Person Array 对象。

以下是整体页面视图：

import 'package:erg_app/StockPage.dart';
import 'package:erg_app/models/users_model.dart';
import 'package:flutter/material.dart';
import 'package:erg_app/Widgets/nav-drawer.dart';
import 'package:erg_app/models/eopmodel.dart';
import 'package:erg_app/StartScan.dart';
import 'dart:convert';
import 'dart:async';
import 'package:shared_preferences/shared_preferences.dart';

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

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

class _MyHomeState extends State<EopPage> {
  List<Person> persons = [
    Person(
        name: 'RIFAN',
        profileImg: 'assets/images/user.png',
        allocated_farmers: "300",
        validated_farmers: "345",
        non_validated_farmers: "120",
        daily_inventory_status: "Completed",
        distribution_centers: "100"),
    Person(
        name: 'MAAN',
        profileImg: 'assets/images/user.png',
        allocated_farmers: "230",
        validated_farmers: "195",
        non_validated_farmers: "110",
        daily_inventory_status: "Incompleted",
        distribution_centers: "70"),
    Person(
        name: 'COPMAN',
        profileImg: 'assets/images/user.png',
        allocated_farmers: "560",
        validated_farmers: "45",
        non_validated_farmers: "780",
        daily_inventory_status: "Completed",
        distribution_centers: "40"),
  ];

  Widget personDetailCard(Person) {
    return Container(
      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(Person.profileImg)))),
                  ),
                  SizedBox(
                    width: 20,
                  ),
                  Text(
                    Person.name,
                    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(
                      Person.allocated_farmers,
                      textAlign: TextAlign.left,
                      style: TextStyle(
                        color: Colors.grey[700],
                        fontSize: 14.0,
                        decoration: TextDecoration.none,
                        fontWeight: FontWeight.normal,
                      ),
                    ),
                  ),
                ],
              ),
              Row(
                children: <Widget>[
                  Padding(
                    padding: const EdgeInsets.only(left: 10, top: 10),
                    child: Text(
                      'Validated 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(
                      Person.validated_farmers,
                      textAlign: TextAlign.left,
                      style: TextStyle(
                        color: Colors.grey[700],
                        fontSize: 14.0,
                        decoration: TextDecoration.none,
                        fontWeight: FontWeight.normal,
                      ),
                    ),
                  ),
                ],
              ),
              Row(
                children: <Widget>[
                  Padding(
                    padding: const EdgeInsets.only(left: 10, top: 10),
                    child: Text(
                      'Non Validated Farmers:',
                      textAlign: TextAlign.left,
                      style: TextStyle(
                        color: Color(0xFF9b9b9b),
                        fontSize: 14.0,
                        decoration: TextDecoration.none,
                        fontWeight: FontWeight.normal,
                      ),
                    ),
                  ),
                  Padding(
                    padding: const EdgeInsets.only(left: 40, top: 12),
                    child: Text(
                      Person.non_validated_farmers,
                      textAlign: TextAlign.left,
                      style: TextStyle(
                        color: Colors.grey[700],
                        fontSize: 14.0,
                        decoration: TextDecoration.none,
                        fontWeight: FontWeight.normal,
                      ),
                    ),
                  ),
                ],
              ),
              Row(
                children: <Widget>[
                  Padding(
                    padding: const EdgeInsets.only(left: 10, top: 10),
                    child: Text(
                      'Distribution Centers:',
                      textAlign: TextAlign.left,
                      style: TextStyle(
                        color: Color(0xFF9b9b9b),
                        fontSize: 14.0,
                        decoration: TextDecoration.none,
                        fontWeight: FontWeight.normal,
                      ),
                    ),
                  ),
                  Padding(
                    padding: const EdgeInsets.only(left: 60, top: 12),
                    child: Text(
                      Person.distribution_centers,
                      textAlign: TextAlign.left,
                      style: TextStyle(
                        color: Colors.grey[700],
                        fontSize: 14.0,
                        decoration: TextDecoration.none,
                        fontWeight: FontWeight.normal,
                      ),
                    ),
                  ),
                ],
              ),
              Row(
                children: <Widget>[
                  Padding(
                    padding: const EdgeInsets.only(left: 10, top: 10),
                    child: Text(
                      'Daily Inventory Status:',
                      textAlign: TextAlign.left,
                      style: TextStyle(
                        color: Color(0xFF9b9b9b),
                        fontSize: 14.0,
                        decoration: TextDecoration.none,
                        fontWeight: FontWeight.normal,
                      ),
                    ),
                  ),
                  Padding(
                    padding: const EdgeInsets.only(left: 50, top: 12),
                    child: Text(
                      Person.daily_inventory_status,
                      textAlign: TextAlign.left,
                      style: TextStyle(
                        color: Person.daily_inventory_status == 'Completed'
                            ? Colors.green
                            : Colors.red,
                        fontSize: 14.0,
                        decoration: TextDecoration.none,
                        fontWeight: FontWeight.normal,
                      ),
                    ),
                  ),
                ],
              ),
              Container(
                height: 20,
              ),
              Row(
                children: <Widget>[
                  /////////// Buttons /////////////

                  Padding(
                    padding: const EdgeInsets.all(10.0),
                    child: Person.daily_inventory_status == 'Completed'
                        ? FlatButton(
                            child: Padding(
                              padding: EdgeInsets.only(
                                  top: 8, bottom: 8, left: 10, right: 10),
                              child: Text(
                                'Validate Farmer',
                                textDirection: TextDirection.ltr,
                                style: TextStyle(
                                  color: Colors.white,
                                  fontSize: 15.0,
                                  decoration: TextDecoration.none,
                                  fontWeight: FontWeight.normal,
                                ),
                              ),
                            ),
                            color: Colors.green,
                            shape: new RoundedRectangleBorder(
                                borderRadius: new BorderRadius.circular(20.0)),
                            onPressed: () {
                              Navigator.push(
                                  context,
                                  new MaterialPageRoute(
                                      builder: (context) => StartScanPage()));
                              // Edit()was here
                            },
                          )
                        : FlatButton(
                            child: Padding(
                              padding: EdgeInsets.only(
                                  top: 8, bottom: 8, left: 10, right: 8),
                              child: Text(
                                'Take Inventory',
                                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) => StockPage()));
                            },
                          ),
                  ),

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

  
 var user;
 var userData;
 var anchors; 
  @override
  void initState() {
    _getUserAnchor();
    super.initState();
  }

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      drawer: NavDrawer(),
      appBar: AppBar(
        title: Text('Dashboard'),
        iconTheme: IconThemeData(color: Colors.white),
        backgroundColor: Colors.green,
      ),
      backgroundColor: Colors.white,
      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),
                ),
                Icon(Icons.notifications_none, size: 35, color: Colors.white)
              ],
            ),
            Column(
                children: persons.map((p) {
              return personDetailCard(p);
            }).toList())
          ],
        ),
      ),
    );
  }
}

【问题讨论】：

标签： flutter dart sharedpreferences flutter-layout flutter-dependencies

【解决方案1】：

这里有一个例子让你实现你的场景..

   var user;
   var userData;
   List anchors = [];

   _getUserAnchor() async{
    SharedPreferences localStorage  = await SharedPreferences.getInstance();
    user = userJson;  
    setState(() {
      anchors = user['Anchors'];       
    });
    print(anchors);
    setState(() {
     userData = anchors;
    });
   }
    @override
    Widget build(BuildContext context) {
    return Scaffold(
    appBar: AppBar(title: Text('test'),),
    body: Column(
     children: <Widget>[
      ListView.builder(
        shrinkWrap: true,
        itemCount: anchors.length,
        itemBuilder: (BuildContext context, int i){
        return Padding(
          padding: const EdgeInsets.all(8.0),
          child: Card(
            child: Column(
              children: <Widget>[
                Text(anchors[i]['Name']),
                Text(anchors[i]['Oid'].toString()),
              ],
            ),
          ),
        );
      })
    ],
   ),
 );
}

在这里，我没有从共享偏好中获取数据，我将您的 json 与 userJson 相等，您可以使用相同的步骤从共享偏好中获取数据并跟进，因此您可以建立卡片列表..希望这会有所帮助你……

【讨论】：

今天我会发给你
哦哦好的兄弟，非常感谢。在等待您发送的文件时，让我试一试。我真的很感激。
非常感谢@s.am.i
让我知道它是否有效......请接受它作为答案
好的，效果很好。我会接受的。但还有一件事，拜托。如果我将每个锚的 Oid 解析到详细屏幕，并且 Oid 像锚一样有另一个键和值，请问我该如何循环遍历你有任何建议，先生。我试过了，Oid 将属于它的所有值都拉到了详细屏幕上，即使嵌套一次也很好，但是如何循环遍历详细屏幕中的嵌套值是问题所在。嵌套值是我之前提供的数组中的 DistributionCentres。请问先生您有什么线索吗？