flutter - 我如何使用一个键来循环存储在我的 sharedpreference 中的数据 - Flutter
问题描述
这是帮助我从共享偏好存储中获取数据的功能：
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())
],
),
),
);
}
}
解决方案
这是您实现方案的示例..
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 相等，您可以使用相同的步骤从共享首选项中获取数据并跟进，因此您可以建立卡片列表..希望这对您有所帮助.. .
推荐阅读
- java - 如何将 toArray 结果转换为 CompletableFuture
[] 类型？ - powershell - 如何在 Powershell 中将数据从 XLSX 附加到 XLSX？
- r-markdown - Rmarkdown 未正确显示可折叠面板
- reactjs - 合并不兼容的类型。例如：类型“{}”不可分配给类型“{}”
- .htaccess - 在 htaccess 中重写文件夹名称
- javascript - 数组 + 矩阵 = 对象数组
- javascript - 如何将 JSON 对象的 JavaScript 数组绑定到 viewModel 中的对象列表。dotnetcore mvc
- laravel - Laravel 使用 datetime-local 进行验证
- node.js - 如何通过 mongoose 中的 slug 属性值而不是 id 查询特定的帖子？
- python - Python如何打印全栈，包括使用的魔术方法（dunder methods）？