Flutter JSON解析与Web视图展示插件jsonatawebview的使用

Features

Jsonata插件为Flutter提供了使用Jsonata表达式查询和转换JSON数据的功能。

Getting started

权限配置

由于该插件使用了最新版本的Jsonata，因此需要启用互联网权限：

Android

在您的AndroidManifest.xml文件中，需要添加以下权限以允许访问互联网：

<uses-permission android:name="android.permission.INTERNET" />

macOS/iOS

对于macOS和iOS，需要配置权限。在DebugProfile.entitlements和ReleaseProfile.entitlements文件中，添加以下键以允许网络访问：

DebugProfile.entitlements:

<key>com.apple.security.network.client</key>
<true/>

ReleaseProfile.entitlements:

<key>com.apple.security.network.client</key>
<true/>

此外，在Info.plist中添加以下键以允许任意负载：

<key>NSAllowsArbitraryLoads</key>
<true/>

Usage

插件允许您通过应用Jsonata查询从数据中提取特定信息。以下是三种使用方法的示例：

方法1：直接评估Jsonata表达式

在这种方法中，您直接对提供的数据应用Jsonata表达式（jql）进行评估。

var json = await Jsonata(jql).evaluate(data);

方法2：创建Jsonata表达式对象并评估

在这里，您先创建一个Jsonata表达式对象，然后对该对象应用数据进行评估。

var expression = Jsonata(jql);
var json = await expression.evaluate(data);

方法3：显式设置数据并查询

此方法涉及在Jsonata实例中显式设置数据，然后使用指定的表达式查询数据。

var jsonata = Jsonata();
jsonata.set(data: data);
var json = await jsonata.query(jql);

完整示例代码

以下是一个完整的示例代码，展示了如何使用jsonatawebview插件进行JSON解析和查询。

示例代码：main.dart

import 'package:flutter/material.dart';
import 'package:jsonatawebview/jsonatawebview.dart'; // 导入jsonatawebview插件

void main() {
  runApp(
    const MaterialApp(home: MyHomePage()), // 使用MaterialApp作为根组件
  );
}

class MyHomePage extends StatefulWidget {
  const MyHomePage({super.key});

  [@override](/user/override)
  // 定义状态类
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  String data = '''{
        "FirstName": "Fred",
        "Surname": "Smith",
        "Age": 28,
        "Gender": "Male",
        "Married": false,
        "Address": {
          "Street": "Hursley Park",
          "City": "Winchester",
          "Postcode": "SO21 2JN"
        },
        "Children": ["John","Jane","Jill"]
      }'''; // 示例JSON数据
  String jql = "Address.City='Winchester'"; // Jsonata查询表达式
  String result = ""; // 查询结果

  // 初始化状态
  [@override](/user/override)
  void initState() {
    super.initState();
  }

  // 执行查询的方法
  query() async {
    try {
      // 方法3：显式设置数据并查询
      var jsonata = Jsonata();
      jsonata.set(data: data);
      var json = await jsonata.query(jql);

      setState(() {
        result = json.toString(); // 更新UI
      });
    } catch (e) {
      setState(() {
        result = 'Error: ${e.toString()}'; // 捕获错误
      });
    }
  }

  [@override](/user/override)
  void dispose() {
    super.dispose();
  }

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        backgroundColor: Theme.of(context).colorScheme.inversePrimary,
        title: const Text('Jsonata Query App'), // 设置标题
      ),
      body: SingleChildScrollView(
        child: Padding(
          padding: const EdgeInsets.all(16.0),
          child: Column(
            children: [
              // 输入JSON数据的文本框
              TextFormField(
                style: Theme.of(context).textTheme.bodySmall,
                maxLines: null,
                maxLength: 120,
                decoration: InputDecoration(
                  hintText: data,
                  border: const OutlineInputBorder(),
                ),
                onChanged: (value) => data = value, // 动态更新数据
              ),
              const SizedBox(height: 10), // 添加间距
              // 输入Jsonata查询表达式的文本框
              TextFormField(
                style: Theme.of(context).textTheme.bodySmall,
                maxLines: 3,
                maxLength: 120,
                decoration: InputDecoration(
                  hintText: jql,
                  border: const OutlineInputBorder(),
                ),
                onChanged: (value) => jql = value, // 动态更新查询表达式
              ),
              const SizedBox(height: 20), // 添加间距
              // 查询按钮
              ElevatedButton(
                onPressed: query, // 点击查询按钮时执行query方法
                child: const Text('Query'),
              ),
              const SizedBox(height: 20), // 添加间距
              // 显示查询结果
              Text(
                result,
                style: Theme.of(context).textTheme.bodySmall,
              ),
            ],
          ),
        ),
      ),
    );
  }
}