img

特点

  1. 支持添加评论；
  2. 支持显示无效 JSON 文本的错误；
  3. 美化 JSON 文本格式；
  4. 输出解码后的 Map 或 List 对象；

入门

dependencies:
    json_editor: ^0.0.1

屏幕截图

用法

import 'package:json_editor/json_editor.dart';

JsonEditor(
    onValue: (value) {
        print(value);
    },
)

您可以使用 JSON 文本进行初始化

import 'package:json_edior/json_editor.dart';

JsonEditor(
    jsonString: '''
        {
            // This is a comment
            "name": "young chan",
            "number": 100,
            "boo": true,
            "user": {"age": 20, "tall": 1.8},
            "cities": ["beijing", "shanghai", "shenzhen"]
         }
    ''',
    onValue: (value) {
        print(value);
    },
)

或者使用 JSON 对象进行初始化

import 'package:json_editor/json_editor.dart';

JsonEditor(
    jsonValue: const {
        "name": "young",
        "number": 100,
        "boo": true,
        "user": {"age": 20, "tall": 1.8},
        "cities": ["beijing", "shanghai", "shenzhen"]
    },
    onValue: (value) {
        print(value);
    },
)

如果同时存在 jsonString 和 jsonEditor，则首先解析 jsonString。

onValue 输出一个 Map 或 List 对象。 如果 JSON 文本中存在错误，则不会调用闭包。

主题

如果您想自定义 JSON 主题，可以使用 JsonEditorTheme 组件。

JsonEditorTheme(
    themeData: JsonEditorThemeData(
        lightTheme: JsonEditorThemeData.defaultTheme().lightTheme.copyWith(bracketStyle: TextStyle(color: Colors.amber, fontSize: 16)),
        darkTheme: JsonEditorThemeData.defaultTheme().darkTheme
    ),
    child: JsonEditor(
        jsonValue: const {
            "name": "young",
            "number": 100,
            "boo": true,
            "user": {"age": 20, "tall": 1.8},
            "cities": ["beijing", "shanghai", "shenzhen"]
        },
        onValue: (value) {
            print(value);
        },
    )
)

许可证

请参阅 LICENSE

GitHub

查看 Github