Flutter JSON编辑插件json_editor_flutter的使用

JsonEditor class

JsonEditor 是一个用于在Flutter应用程序中编辑JSON对象的包。通过这个用户友好的小部件，您可以创建、编辑和格式化对象。

查看下面的示例以了解其用法。

JsonEditor Live Demo

Getting started

1. 在您的Flutter项目中添加此包。在终端运行命令 flutter pub add json_editor_flutter。
2. 导入包 import 'package:json_editor_flutter/json_editor_flutter.dart';。

Using JsonEditor

JSON可以以两种方式编辑：树形编辑器或文本编辑器。您可以禁用其中任何一个。

当UI编辑器处于活动状态时，您可以通过使用enableMoreOptions来禁用添加/删除键。同样，通过使用enableKeyEdit和enableValueEdit也可以禁用编辑键和值。

当文本编辑器处于活动状态时，它将简单地忽略enableMoreOptions、enableKeyEdit和enableValueEdit。

duration是onChanged函数的防抖时间，默认为500毫秒。

editors是支持的编辑器列表。第一个元素将被用作默认编辑器，默认为[Editors.tree, Editors.text]。

Example

以下是一个完整的示例demo，展示了如何使用JsonEditor：

import 'dart:convert';

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

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

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return const MaterialApp(
      title: 'JSON Editor Example',
      home: JsonEditorExample(),
    );
  }
}

class JsonEditorExample extends StatelessWidget {
  const JsonEditorExample({super.key});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('JSON Editor Example'),
      ),
      body: Padding(
        padding: const EdgeInsets.all(20),
        child: JsonEditor(
          onChanged: (value) {
            // 处理JSON变化事件
            print('Updated JSON: $value');
          },
          json: jsonEncode({
            "name": "John Doe",
            "age": 24,
            "hobbies": ["Reading", "Coding"],
            "address": {
              "street": "Main Street",
              "number": 1234567890,
              "city": "New York"
            }
          }),
          editors: [Editors.tree, Editors.text], // 设置编辑器类型
          enableMoreOptions: true, // 启用更多选项（如添加/删除键）
          enableKeyEdit: true, // 启用键编辑
          enableValueEdit: true, // 启用值编辑
          duration: const Duration(milliseconds: 500), // 设置防抖时间
          themeColor: Colors.blue, // 设置主题颜色
          expandedObjects: const ["hobbies", ["education", 0]], // 设置默认展开的对象
        ),
      ),
    );
  }
}

Enums

支持的JSON编辑器枚举如下：

enum Editors { tree, text }

Customization

expandedObjects

expandedObjects是指那些默认情况下将被展开的对象。如果数据是一个列表，则可以提供索引。

例如：

data = {
  "hobbies": ["Reading books", "Playing Cricket"],
  "education": [
    {"name": "Bachelor of Engineering", "marks": 75},
    {"name": "Master of Engineering", "marks": 72},
  ],
}

// 展开教育和爱好
JsonEditor(
  expandedObjects: const [
    "hobbies",
    ["education", 0] // 展开教育中的第一个元素
  ],
  onChanged: (_) {},
  json: jsonEncode(data),
)

Properties

Additional information

如果您发现任何问题或有功能请求，请在GitHub Issues上提交。

请点赞👍，如果您觉得这个包有用。