Flutter随记七：Json数据与Dart对象转换详解

鸡肋佐

已于 2024-07-21 11:56:06 修改

阅读量5.3k

点赞数 1

分类专栏： Flutter随记文章标签：大数据

于 2022-07-01 13:30:12 首次发布

本文链接：https://blog.csdn.net/weixin_38201372/article/details/125553890

版权

Flutter随记专栏收录该内容

8 篇文章 1 订阅

订阅专栏

一、JsonToDart工具

二、使用示例

三、其他转换方式

一、在线dart解析工具

目前有一些网页，可以直接将JSON转成Dart对象，再放入工程中。

https://javiercbk.github.io/json_to_dart/ （有时网速慢打不开）
https://app.quicktype.io (可以转dart模型，还可以转成swift、java模型等等)

Instantly parse JSON in any language | quicktype

JsonToDart

二、使用示例

1、MYJSON.json测试数据结构下面这样的。

{
	"body": {
		"code": "0000",
		"data": {
			"msPropcircleworkList": [{
				"articletitle": "测试数据一！",
				"articletags": "冒险,极限"
			},
            {
				"articletitle": "测试数据一",
				"articletags": "旅游,美食"
			},
            {
				"articletitle": "测试数据三",
				"articletags": "文学,美食"
			},
            {
				"articletitle": "测试数据四",
				"articletags": "古玩,美食"
			}]
		}
	}
}

2、引入的tuiJianArticleObject.dart就是转化后的Dart对象文件。

import '../Pages/tuiJianArticleObject.dart';

3、tuiJianStackItem() 该方法获取本地MYJSON.json文件。

Future<Data> tuiJianStackItem() async {
    var value = await rootBundle.loadString('images/MYJSON文件.json');
    Map<String, dynamic> articleM1 = json.decode(value);
    // return msPropcircleworkListM = articleM1['body']['data'];
    TuiJianArticleObject objet = TuiJianArticleObject.fromJson(articleM1);
    setState(() {
      msPropcircleworkListM = objet.body!.data ?? new Data();
    });
    return msPropcircleworkListM;
  }

4、getItem() 和_aricleItem(int i) 该方法根据数据渲染页面。

List<Widget> getItem() {
    List<Widget> ls = [];
    //做对象转化时打开代码
    for (var i = 0;i < (msPropcircleworkListM.msPropcircleworkList?.length ?? 0);i++) {
      ls.add(_aricleItem(i));
    }
     //不做对象转化时 打开下面代码
    // var msPropcircleworkList = msPropcircleworkListM == null
    //     ? []
    //     : msPropcircleworkListM['msPropcircleworkList'];
    // for (var i = 0; i < msPropcircleworkList.length; i++) {
    //   ls.add(_aricleItem(i));
    // }
    return ls.toList();
  }

  Padding _aricleItem(int i) {

    MsPropcircleworkList lsobj = msPropcircleworkListM.msPropcircleworkList![i];//做对象转化时打开代码

    // var msPropcircleworkList = msPropcircleworkListM == null
    //     ? []
    //     : msPropcircleworkListM['msPropcircleworkList'][i]; //不做对象转化时打开代码

    return Padding(
        padding: EdgeInsets.fromLTRB(10, 10, 10, 10),
        child: Row(
          mainAxisAlignment: MainAxisAlignment.spaceBetween,
          crossAxisAlignment: CrossAxisAlignment.center,
          children: [
            Container(
                color: Colors.white,
                width: MediaQuery.of(context).size.width - 20,
                child: Column(
                    mainAxisAlignment: MainAxisAlignment.start,
                    crossAxisAlignment: CrossAxisAlignment.start,
                    children: [
                      Text(
                        // msPropcircleworkList['articletitle'], //不做对象转化时打开代码
                        lsobj.articletitle ?? "",
                        maxLines: 2,
                        overflow: TextOverflow.ellipsis,
                        style: TextStyle(
                          fontSize: 14,
                        ),
                      ),
                      Text(
                        // msPropcircleworkList['articletags'], //不做对象转化时打开代码
                          lsobj.articletags ?? "",
                          style: TextStyle(
                            fontSize: 12,
                            color: Colors.red,
                          )),
                      Divider(
                        height: 20,
                        color: Colors.white,
                      )
                    ])),
          ],
        ));
  }

完整demo代码示例:

import 'dart:convert';

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

import '../Pages/tuiJianArticleObject.dart';

class JsonCoverObject extends StatefulWidget {
  JsonCoverObject({Key? key}) : super(key: key);

  @override
  State<JsonCoverObject> createState() => _JsonCoverObjectState();
}

class _JsonCoverObjectState extends State<JsonCoverObject> {
  Data msPropcircleworkListM = new Data(); //做对象转化时打开代码
  // var msPropcircleworkListM; //不做对象转化时打开代码

  @override
  void initState() {
    super.initState();
    //读取本地json文件
    tuiJianStackItem();
  }

  @override
  Widget build(BuildContext context) {
    return Container(
        color: Colors.grey,
        child: ListView(
          children: getItem(),
        ));
  }

  List<Widget> getItem() {
    List<Widget> ls = [];
    //做对象转化时打开注释
    for (var i = 0;i < (msPropcircleworkListM.msPropcircleworkList?.length ?? 0);i++) {
      ls.add(_aricleItem(i));
    }
    //不做对象转化时打开注释
    // var msPropcircleworkList = msPropcircleworkListM == null
    //     ? []
    //     : msPropcircleworkListM['msPropcircleworkList'];
    // for (var i = 0; i < msPropcircleworkList.length; i++) {
    //   ls.add(_aricleItem(i));
    // }
    return ls.toList();
  }

  Padding _aricleItem(int i) {
    MsPropcircleworkList lsobj = msPropcircleworkListM.msPropcircleworkList![i];//做对象转化时打开代码

    // var msPropcircleworkList = msPropcircleworkListM == null
    //     ? []
    //     : msPropcircleworkListM['msPropcircleworkList'][i]; //不做对象转化时打开代码

    return Padding(
        padding: EdgeInsets.fromLTRB(10, 10, 10, 10),
        child: Row(
          mainAxisAlignment: MainAxisAlignment.spaceBetween,
          crossAxisAlignment: CrossAxisAlignment.center,
          children: [
            Container(
                color: Colors.white,
                width: MediaQuery.of(context).size.width - 20,
                child: Column(
                    mainAxisAlignment: MainAxisAlignment.start,
                    crossAxisAlignment: CrossAxisAlignment.start,
                    children: [
                      Text(
                        // msPropcircleworkList['articletitle'], //不做对象转化时打开代码
                        lsobj.articletitle ?? "",//做对象转化时打开代码
                        maxLines: 2,
                        overflow: TextOverflow.ellipsis,
                        style: TextStyle(
                          fontSize: 14,
                        ),
                      ),
                      Text(
                        // msPropcircleworkList['articletags'], //不做对象转化时打开代码
                          lsobj.articletags ?? "",//做对象转化时打开代码
                          style: TextStyle(
                            fontSize: 12,
                            color: Colors.red,
                          )),
                      Divider(
                        height: 20,
                        color: Colors.white,
                      )
                    ])),
          ],
        ));
  }
//做对象转化时打开代码
  Future<Data> tuiJianStackItem() async {
    var value = await rootBundle.loadString('images/tuijian.json');
    Map<String, dynamic> articleM1 = json.decode(value);
    // return msPropcircleworkListM = articleM1['body']['data'];
    TuiJianArticleObject objet = TuiJianArticleObject.fromJson(articleM1);
    setState(() {
      msPropcircleworkListM = objet.body!.data ?? new Data();
    });
    return msPropcircleworkListM;
  }

// //不做对象转化时打开代码
//   tuiJianStackItem() async {
//     var value = await rootBundle.loadString('images/tuijian.json');
//     Map articleM1 = json.decode(value);
//     setState(() {
//       msPropcircleworkListM = articleM1['body']['data'];
//     });
//   }
}