Flutter-JSON读取和解析

在开发中，我们经常会使用本地JSON或者从服务器请求数据后回去到JSON，拿到JSON后通常会将JSON转成Model对象来进行后续的操作，因为这样操作更加的方便，也更加的安全。

所以学习JSON的相关操作以及读取JSON后如何转成Model对象对于Flutter开发也非常重要。

1. JSON资源配置

JSON也属于一种资源，所以在使用之前需要先进行相关的配置

image.png

JSON文件内容：

[{
        "nickName": "李明",
        "roomName": "8801",
        "roomSrc": "https://tva1.sinaimg.cn/large/006y8mN6gy1g7aa03bmfpj3069069mx8.jpg"
    },
    {
        "nickName": "王小",
        "roomName": "8802",
        "roomSrc": "https://tva1.sinaimg.cn/large/006y8mN6gy1g7aa03bmfpj3069069mx8.jpg"
    },
    {
        "nickName": "张三",
        "roomName": "8803",
        "roomSrc": "https://tva1.sinaimg.cn/large/006y8mN6gy1g7aa03bmfpj3069069mx8.jpg"
    }
]

2. JSON读取解析

2.1 JSON资源读取

如果我们希望读取JSON资源，可以使用package:flutter/services.dart包中的rootBundle。
在rootBundle中有一个loadString方法，可以去加载JSON资源

• 但是注意，查看该方法的源码，你会发现这个操作是一个异步的

2.2 JSON字符串转化

拿到JSON字符串后，我们需要将其转成成我们熟悉的List和Map类型。
我们可以通过dart:convert包中的json.decode方法将其进行转化

Future<List<Anchor>> getAnchors() async {
    //1. 读取json文件
    String jsonString = await rootBundle.loadString("assets/test.json");

    //2.转成List或Map类型
    final jsonResult = json.decode(jsonString);

    //遍历List，并且转成Anchor对象放到另一个List中
    List<Anchor> anchors = new List();
    for(Map<String,dynamic> map in jsonResult) {
      anchors.add(Anchor.withMap(map));
    }

    return anchors;
  }

2.3 对象Model定义

将JSON转成了List和Map类型后，就可以将List中的一个个Map转成Model对象，所以我们需要定义自己的Model

import 'package:flutter/services.dart' show rootBundle;
import 'dart:convert';
import 'dart:async';

class Anchor {
  String nickName;
  String roomName;
  String imageUrl;

  Anchor({
    this.nickName,
    this.roomName,
    this.imageUrl
});

  Anchor.withMap(Map<String,dynamic> parseMap) {
    this.nickName = parseMap["nickName"];
    this.roomName = parseMap["roomName"];
    this.imageUrl = parseMap["roomSrc"];
  }

  Future<List<Anchor>> getAnchors() async {
    //1. 读取json文件
    String jsonString = await rootBundle.loadString("assets/test.json");

    //2.转成List或Map类型
    final jsonResult = json.decode(jsonString);

    //遍历List，并且转成Anchor对象放到另一个List中
    List<Anchor> anchors = new List();
    for(Map<String,dynamic> map in jsonResult) {
      anchors.add(Anchor.withMap(map));
    }

    return anchors;
  }

  @override
  String toString() {
    return "$nickName - $roomName : $imageUrl";
  }
}

3. JSON解析代码

这里我单独创建了一个anchor.dart的文件，在其中定义了所有的相关代码：

• 之后外界只需要调用我内部的getAnchors就可以获取到解析后的数据了

import 'package:flutter/material.dart';
import 'anchor.dart';

main(List<String> args) {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text("HelloWorld"),
        ),
        body: MyHomeBody(),
      ),
    );
  }
}

class MyHomeBody extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    var future = Anchor().getAnchors();
    future.then((value) {
      print(value.toString());
    }).catchError((error) {
      // 捕获出现异常时的情况
      print(error);
    });
    return Center(child: Text("json文件读取"));
  }
}

image.png

学习内容来自Flutter从入门到实战