flutter:从接口获取json数据后并解析

一,代码:

dart代码:model

class GoodsListItem {
  String name;
  String desc;
  int id;

  GoodsListItem(this.name,this.desc, this.id) {}

  GoodsListItem.fromJson(Map<String, dynamic>json)
      :name=json["name"],
        desc = json["desc"],
        id = json["id"];

  Map<String, dynamic> toJson() {
    return {
      "name": name,
      "desc": desc,
      "id": id
    };
  }

  //供打印对象使用
  @override
  String toString() {
    return 'GoodsListItem{id: $id, name: $name, desc: $desc}';
  }
}

dart代码:页面

import 'package:demo3/model/GoodsListItem.dart';
import 'package:flutter/material.dart';
import 'package:dio/dio.dart';
import 'dart:convert';


class ApijsonPage extends StatefulWidget {
  final Map arguments;

  // 为title设置一个默认参数,这样的跳转该界面时可以不传值。
  ApijsonPage({super.key, required this.arguments});
  @override
  State<ApijsonPage> createState() => _ApijsonPageState();
}

class _ApijsonPageState extends State<ApijsonPage> {

  //存放数据
  List<GoodsListItem> _listData=[];

  //从接口得到数据
  Future<Null> apiGoodsList(String url) async{
    print(url);
    try {
      var response = await Dio().get(url);
      print(response);

      //处理json到类中
      var resoMap=json.decode(response.toString());
      print(resoMap);
      //如果有报错,弹出报错信息,并返回
      String status = resoMap['status'];
      if (status != "success") {
        print("出错");
        return null;
      } else {
        print("正确");
      }

      for (int i = 0; i < (resoMap['data']['list'].length); i++) {
        print("i:"+i.toString());
        var itemOne = resoMap['data']['list'][i];
        print(itemOne);
        GoodsListItem goodsOne = new GoodsListItem(itemOne['name'],itemOne['desc'], itemOne['id']);
        _listData.add(goodsOne);
      }
      print("从接口获取到的数据:");
      print(_listData);

      setState(() {
      });
    } catch (e) {
      print(e);
    }
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        backgroundColor: Theme.of(context).colorScheme.primaryContainer,
        title: Text(widget.arguments["title"]),
      ),

      body: Center(
        child: ElevatedButton(
          onPressed: () async {
            print("点击了");
            String apiUrl = "http://www.testsite.net/list.php";
            apiGoodsList(apiUrl);
          },
          child: Row(
            mainAxisSize: MainAxisSize.min, // 根据内容调整大小
            children: <Widget>[
              Icon(Icons.add), // 图标在左侧
              SizedBox(width: 10), // 可选:添加一些间隔
              Text("解析json"), // 文本在右侧
            ],
          ),
        ),
      ),

    );
  }
}

 2,接口输出json:

二,测试效果

打印输出:

I/flutter ( 8612): 从接口获取到的数据:
I/flutter ( 8612): [GoodsListItem{id: 1, name: name1, desc: desc1}, 
                    GoodsListItem{id: 2, name: name2, desc: desc2}, 
                    GoodsListItem{id: 3, name: name3, desc: desc3}]

 

posted @ 2025-03-29 09:04  刘宏缔的架构森林  阅读(63)  评论(0)    收藏  举报