我们可以将 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, shembulliImg1, shembulliImg2, 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

你可以使用这个模型来工作。

      
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。看here。

Answer 2

获取 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)),
            ))
      ],
    )
    ,
  })
}