我们可以将 JSON 中的数据返回到除了 ListView 之外的任何东西中吗？

Posted 2023-02-23

【中文标题】我们可以将 JSON 中的数据返回到除了 ListView 之外的任何东西中吗？

【英文标题】：Can we return data from JSON into anything but ListView in flutter?

【发布时间】：2021-02-05 05:42:59

【问题描述】：

我正在尝试为字母表中的每个字母制作一个页面。我需要从 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"
    ,

【问题讨论】：

是的，您可以将 json 数据返回到任何内容中。

所有 Flutter 教程只展示了如何在 ListView 中从 json 返回数据，您对我如何正确解析数据有任何想法/示例吗？

【参考方案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。

【参考方案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)),
            ))
      ],
    )
    ,
  )

【讨论】：

这看起来不错，json 来自本地文件 "assets/data/alfabeti.json" ，您可以为此包含 fetchData 和 setState 吗？

youtube.com/watch?v=Cn6VCTaHB-k&t=531s 在这个文件中，他得到了一个 JSON 并从中创建了一个 const List 变量。然后他将该列表保存在 dart 文件中。并导入该飞镖文件。之后，只需将 const List 分配给 AlphabetList。