我们可以在flutter中将JSON中的数据返回到ListView之外的任何内容中吗

Question

我正在为字母表中的每个字母制作一页。我需要从JSON中获取数据。所以我不必为每个字母定义一个类。

Row(
children: <Widget>[
Expanded(
child: Stack(
children: <Widget>[
Container(
margin: EdgeInsets.all(sizeY / 3 - 1),
height: sizeY,
decoration: BoxDecoration(
image: DecorationImage(
image: AssetImage(
"assets/square-" + imgColor + "-big.png"),
fit: BoxFit.fitHeight)),
child: Padding(
padding: const EdgeInsets.all(15.0),
child: Center(
child: Text(
this.letter + this.letter.toLowerCase(),
style: TextStyle(
color: Colors.white,
fontSize: 40.0,
fontFamily: 'ConcertOne',
fontWeight: FontWeight.normal),
textAlign: TextAlign.center,
),
),
),
),
],
),
),
Expanded(
child: Text(
this.shembulli1,
style: TextStyle(
color: Colors.pink,
fontWeight: FontWeight.bold,
fontSize: 30.0),
textAlign: TextAlign.center,
),
),
Expanded(
child: Container(
width: sizeY / 2,
height: sizeX / 2,
decoration: BoxDecoration(
image: DecorationImage(
image: AssetImage("assets/" + shembulliImg1 + ".png"),
fit: BoxFit.contain)),
))
],
),

其中shembulli1、shembulli2、shembolliImg1、shembilliImg2、letter和imgColor必须来自JSON，它看起来像这样：

{
"shembulli1":"Bleta",
"shembulli2":"Biçikleta",
"shembulliImg1":"bee",
"shembulliImg2":"bike",
"letter":"B",
"imgColor":"blue"
},
{
"shembulli1":"Cicërima",
"shembulli2":"Certifikata",
"shembulliImg1":"bird",
"shembulliImg2":"letter",
"letter":"C",
"imgColor":"yellow"
},

Answer 1

获取JSON数据以生成列表。从该列表中，您可以进行

yourList.forEach((post) {
//generate widget for each element
})

void getPostsData() {
List<dynamic> AlphabetList = AlphabetModel;
/*    
List defined as the JSON
if you have a JSON in your PC then import it
if your're fetching data from server like firebase then you've to fetch data something like this
fetchData() {
//'data' is the table from where your JSON is generating
CollectionReference collectionReference = Firestore.instance.collection('data');    
collectionReference.snapshots().listen((snapshot) {
setState(() {
//this will give JSON as a List
AlphabetList = snapshot.documents;
});
});
} 
*/

AlphabetList.forEach((post) {
Row(
children: <Widget>[
Expanded(
child: Stack(
children: <Widget>[
Container(
margin: EdgeInsets.all(sizeY / 3 - 1),
height: sizeY,
decoration: BoxDecoration(
image: DecorationImage(
image: AssetImage(
"assets/square-" + post["imgColor"] + "-big.png"),
fit: BoxFit.fitHeight)),
child: Padding(
padding: const EdgeInsets.all(15.0),
child: Center(
child: Text(
post["letter"] + post["letter"].toLowerCase(),
style: TextStyle(
color: Colors.white,
fontSize: 40.0,
fontFamily: 'ConcertOne',
fontWeight: FontWeight.normal),
textAlign: TextAlign.center,
),
),
),
),
],
),
),
Expanded(
child: Text(
post["shembulli1"],
style: TextStyle(
color: Colors.pink,
fontWeight: FontWeight.bold,
fontSize: 30.0),
textAlign: TextAlign.center,
),
),
Expanded(
child: Container(
width: sizeY / 2,
height: sizeX / 2,
decoration: BoxDecoration(
image: DecorationImage(
image: AssetImage("assets/" + post["shembulliImg1"] + ".png"),
fit: BoxFit.contain)),
))
],
)
,
})
}

Answer 2

您可以使用此模型进行操作。

class AlphabetModel {
String shembulli1;
String shembulli2;
String shembulliImg1;
String shembulliImg2;
String letter;
String imgColor;
AlphabetModel(
{this.shembulli1,
this.shembulli2,
this.shembulliImg1,
this.shembulliImg2,
this.letter,
this.imgColor});
AlphabetModel.fromJson(Map<String, dynamic> json) {
shembulli1 = json['shembulli1'];
shembulli2 = json['shembulli2'];
shembulliImg1 = json['shembulliImg1'];
shembulliImg2 = json['shembulliImg2'];
letter = json['letter'];
imgColor = json['imgColor'];
}
Map<String, dynamic> toJson() {
final Map<String, dynamic> data = new Map<String, dynamic>();
data['shembulli1'] = this.shembulli1;
data['shembulli2'] = this.shembulli2;
data['shembulliImg1'] = this.shembulliImg1;
data['shembulliImg2'] = this.shembulliImg2;
data['letter'] = this.letter;
data['imgColor'] = this.imgColor;
return data;
}
}

现在，从JSON中定义序列化列表变得更容易了。之后，您可以构建一个简单的ListView。看这里。