json - 如何将 JSON 中的数据合并到 Flutter 中的小部件？

问题描述

我尝试将我资产中的 json 中的数据传递给一些小部件，但考虑到 json 实际上是地图列表，我不知道如何。感谢您在这方面的帮助。我附上了主要的小部件和 json 代码。在文本所在和图像所在的第一列中，我想分别传递项目名称和图像（资产/$ {图像+}）。

在这种情况下，我需要知道如何转换该数据，以便您可以在小部件中使用它。

Swiper(
itemHeight: media.height * 0.4,
itemWidth: media.width * .6,
layout: SwiperLayout.TINDER,
itemCount: 39,

itemBuilder: (BuildContext context, int index){
  return Container(
    decoration: BoxDecoration(
      color: Colors.orange,
      border: Border.all(color: Color(0xFF858585)),
      borderRadius: BorderRadius.circular(20),
    ),
    child: Column(
      children: <Widget>[
        Padding(
          padding: const EdgeInsets.all(8.0),
          child: Text('Familia Arkani', style: TextStyle(fontSize: 18),),
        ),
        Padding(
          padding: const EdgeInsets.all(8.0),
          child: Image.asset('assets/arkani.png', height: 60, width: 60,),
        ),
        SizedBox(height: 20,),
        Row(
          mainAxisAlignment: MainAxisAlignment.spaceAround,

          children: <Widget>[
            Column(
              children: <Widget>[
                Image.asset('pray.png', height: 30, width: 30,),
                Padding(
                  padding: const EdgeInsets.only(top:5.0),
                  child: Text('Orar'),
                ),
                Switch(
                  value: isOrar,
                  onChanged: (value){
                    setState((){
                      isOrar = value;
                    });
                  },
                )
              ],

            ),
            Column(
              children: <Widget>[
                Image.asset('give.png', height: 30, width: 30,),
                Padding(
                  padding: const EdgeInsets.only(top:5.0),
                  child: Text('Ofrendar'),
                ),
                Switch(
                  value: isOfrendar,
                  onChanged: (value){
                    setState((){
                      isOfrendar = value;
                    });
                  },
                )
              ],
            ),
            Column(
              children: <Widget>[
                Image.asset('move.png', height: 30, width: 30,),
                Padding(
                  padding: const EdgeInsets.only(top:5.0),
                  child: Text('Movilizar'),
                ),
                Switch(
                  value: isMovilizar,
                  onChanged: (value){
                    setState((){
                      isMovilizar = value;
                    });
                  },
                )
              ],
            ),
          ],
        )
      ],
    ),
  );
},

control: new SwiperControl(),
),
  );
  }
}

这是 JSON 这个数据是我想要合并到一些小部件中的。

[
  {
    "id": 1,
    "nombreProy": "Fam. Arkani", //aqui quiero añadir el dato nombreProy
   "image": "arkani",
   "lugar": "Asia del Sur",
    "proceso": "En Campo"
  },
  {
    "id": 2,
    "nombreProy": "Fam. Durán",
    "image": "duran",
    "lugar": "Quechua Panao",
    "proceso": "En Campo"
  },
  {
    "id": 3,
    "nombreProy": "Fam. Flores Diego",
    "image": "flores_diego",
    "lugar": "Amahuacas",
    "proceso": "En Campo"
  },
  {
    "id": 4,
    "nombreProy": "Fam. Garay Galvez",
    "image": "garay_galvez",
    "lugar": "Estados Unidos",
    "proceso": "En Campo"
   },
]

标签： jsonflutterdart

可以解决dart核心框架代码。

您应该首先在根文件夹中创建资产文件夹。（在资产中插入您的 JSON 文件）
打开 pubspec.yaml 文件并声明您的 JSON 文件。

资产：资产/sample.json
您可以使用此代码并访问您的 JSON 文件。

字符串数据 = 等待 rootBundle.loadString('assets/$path.json')
现在您将 JSON 文件作为字符串。
您可以将数据字符串转换为 JSON 格式。

var jsonList = json.decode(data);
最后，您创建一个类 JSON 模型。（可以选择 JSON to dart 或者 JSON 序列化库）

for (var item in jsonList) { print(Sample.fromJson(item)); }

该解决方案将为您提供帮助。如果您想要完整代码，请查看 gist 文件 => https://gist.github.com/VB10/34e97818f19f6bf0749fff8ffd1a5319

json - 如何将 JSON 中的数据合并到 Flutter 中的小部件？

问题描述

解决方案

推荐阅读