flutter 读取json

素颜马尾好姑娘i 2022-05-22 05:18 188阅读 0赞

效果图

![70][]

项目目录里新建一个load\_json目录，里面再新建一个person.json文件。

[
      {
        "name" : "Suye",
        "age" : "27",
        "height" : "170",
        "gender" : "male",
        "hair_color" : "black"
      },
      {
        "name" : "Surina",
        "age" : "26",
        "height" : "160",
        "gender" : "female",
        "hair_color" : "brown"
      },
      {
        "name" : "Terigele",
        "age" : "25",
        "height" : "174",
        "gender" : "male",
        "hair_color" : "black"
      }
    ]

之后在pubspec.yaml里配置引入资源。

![70 1][]

这个配置文件比较坑，需要注意缩进格式，多一个或少一个空格就会出错。

之后就是写主函数了。

import 'dart:convert';
    
    import 'package:flutter/material.dart';
    
    void main() => runApp(new MyApp());
    
    class MyApp extends StatelessWidget {
      @override
      Widget build(BuildContext context) {
        return new MaterialApp(
          title: 'Flutter Demo',
          theme: new ThemeData(
            primarySwatch: Colors.teal,
          ),
          home: new MyHomePage(title: 'Flutter Demo Home Page'),
        );
      }
    }
    
    class MyHomePage extends StatefulWidget {
      MyHomePage({Key key, this.title}) : super(key: key);
      final String title;
    
      @override
      _MyHomePageState createState() => new _MyHomePageState();
    }
    
    class _MyHomePageState extends State<MyHomePage> {
      List data;
      @override
      Widget build(BuildContext context) {
        return new Scaffold(
          appBar: new AppBar(
            title: new Text(widget.title),
          ),
          body: new Center(
            child: FutureBuilder(
              future: DefaultAssetBundle.
              of(context).
              loadString('load_json/person.json'),
              builder: (context,snapshot){
                // ignore: deprecated_member_use
                var mydata = JSON.decode(snapshot.data.toString());
    
                return ListView.builder(
                  itemBuilder: (BuildContext context,int index){
                    return Card(
                      child: Column(
                        crossAxisAlignment: CrossAxisAlignment.stretch,
                        children: <Widget>[
                          Text("Name:" + mydata[index]["name"]),
                          Text("Age:" + mydata[index]["age"]),
                          Text("Height:" + mydata[index]["height"]),
                          Text("Hair:" + mydata[index]["hair_color"]),
                          Text("Gender:" + mydata[index]["gender"]),
                        ],
                      ),
                    );
                  },
                  itemCount: mydata == null ? 0 : mydata.length,
                );
              },
            ),
          ),
        );
      }
    }

读取json文件需要用到Future，异步操作都会用到，相当于web里的promise。（个人理解，水平有限、轻点喷~有高手路过，请帮忙纠正）

读取后需要解析，需要引入convert库，然后用 JSON.decode(snpashot.data.toSpring())

[70]: /images/20220522/da537b8ba7604ca3a0aee265b3ee86d1.png
[70 1]: /images/20220522/1f58ea455f1e4cbeb9dd8a29071b13a9.png