Flutter JSON解析插件json_value的使用

JsonValue 是一个用于更方便地从JSON数据中获取值的插件。

开始使用

在你的项目的 pubspec.yaml 文件中添加以下依赖：

dependencies:
  json_value: "^1.0.0"

然后运行 flutter pub get 来安装依赖。

为什么直接从JSON获取值不是很好

假设你的响应数据如下：

{
    "user": {
        "name": "Jack",
        "age": 20
    },
    "fruits": [
        {
            "name": "apple",
            "detail": "apple is sweet"
        },
        {
            "name": "watermelon",
            "detail": "watermelon is full of water"
        }
    ]
}

如果你想要获取 user->name 的值，并且希望代码健壮不抛出异常，你可能会这样写：

if(response is Map<String,dynamic>){
  var user = response['user'];
  if (user is Map<String,dynamic>){
      var name = user['name'];
  }
}

使用 JsonValue 插件，你可以简化为：

// 将原始的JSON数据转换为JsonValue对象
JsonValue json = JsonValue(response);

// 获取user->name的值
var name = json['user']['name'].stringValue;

// 获取fruits列表
var fruits = json['fruits'].listValue;

// 获取第一个水果的名字
var appleName = json['fruits'][0]['name'].stringValue;

通过这种方式，你不必担心数组越界等问题。它非常安全。

完整示例

下面是一个完整的示例代码，展示了如何使用 JsonValue 插件来解析JSON数据：

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

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(title: Text('JsonValue 示例')),
        body: Center(
          child: JsonExample(),
        ),
      ),
    );
  }
}

class JsonExample extends StatefulWidget {
  [@override](/user/override)
  _JsonExampleState createState() => _JsonExampleState();
}

class _JsonExampleState extends State<JsonExample> {
  String _result = '';

  void _parseJson() {
    // 假设这是你的原始JSON数据
    final response = {
      "user": {
        "name": "Jack",
        "age": 20
      },
      "fruits": [
        {
          "name": "apple",
          "detail": "apple is sweet"
        },
        {
          "name": "watermelon",
          "detail": "watermelon is full of water"
        }
      ]
    };

    // 将原始的JSON数据转换为JsonValue对象
    JsonValue json = JsonValue(response);

    // 获取user->name的值
    var name = json['user']['name'].stringValue;

    // 获取fruits列表
    var fruits = json['fruits'].listValue;

    // 获取第一个水果的名字
    var appleName = json['fruits'][0]['name'].stringValue;

    setState(() {
      _result = '用户名字: $name\n第一个水果的名字: $appleName';
    });
  }

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Column(
      mainAxisAlignment: MainAxisAlignment.center,
      children: <Widget>[
        ElevatedButton(
          onPressed: _parseJson,
          child: Text('解析JSON'),
        ),
        SizedBox(height: 20),
        Text(_result),
      ],
    );
  }
}