Flutter键值编辑器插件most_key_value_editor的使用

Flutter键值编辑器插件most_key_value_editor的使用

特性

• 高度可定制
• 开箱即用的基本类型支持：
  • 布尔值

    { "type": "boolean" }
    

  • 字符串

    { "type": "string" }
    

  • 枚举

    { "type": "string", "enumValues": ["a", "b", "c"] }
    

  • 数字

    { "type": "number" }
    { "type": "integer" }
    

  • 数组

    { "type": "array", "items": { "type": "string" } }
    

• 开箱即用的验证支持
• 功能丰富的编辑控制器
• 内置搜索栏以实现更快导航

使用方法

1. 创建 JsonSchema 对象；
2. 将 JsonSchema 转换为 MostJsonSchema；
3. 在小部件树中添加 MostKeyValueEditor 并提供 MostJsonSchema。

以下是一个完整的示例演示如何使用 most_key_value_editor 插件：

import 'dart:convert';

import 'package:flutter/material.dart';
import 'package:flutter/services.dart';
// ignore: depend_on_referenced_packages
import 'package:json_schema/json_schema.dart';
import 'package:most_key_value_editor/most_key_value_editor.dart';

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

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

  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Editor',
      debugShowCheckedModeBanner: false,
      theme: ThemeData(
        colorScheme: ColorScheme.fromSeed(seedColor: Colors.deepPurple),
        useMaterial3: true,
      ),
      home: const EditorPage(
        initialJson: {
          "person": {
            "last_name": "Doe",
            "gender": "alien",
            "age": 42,
          },
          "ipv4": "0.0.0.256",
        },
        initialJsonSchema: {
          "title": "Person",
          "required": [
            "person",
            "admin",
            "ipv4",
          ],
          "properties": {
            "person": {
              "type": "object",
              "required": [
                "first_name",
                "last_name",
                "nicknames",
                "gender",
                "age",
              ],
              "properties": {
                "first_name": {"type": "string"},
                "last_name": {"type": "string"},
                "nicknames": {
                  "type": "array",
                  "items": {"type": "string"},
                },
                "gender": {
                  "type": "string",
                  "enum": ["male", "female", "prefer not to say"]
                },
                "age": {
                  "description":
                      "年龄必须等于或大于零。",
                  "type": "integer",
                  "minimum": 0
                },
              },
            },
            "admin": {"type": "boolean"},
            "ipv4": {
              "title": "IP",
              "type": "string",
              "pattern":
                  r"^(([0-9]|[1-9][0-9]|1[0-9]{2}|2[0-4][0-9]|25[0-5])\.){3}([0-9]|[1-9][0-9]|1[0-9]{2}|2[0-4][0-9]|25[0-5])$"
            },
          },
        },
      ),
    );
  }
}

class EditorPage extends StatefulWidget {
  final Map<String, dynamic> initialJson;
  final Map<String, dynamic> initialJsonSchema;

  const EditorPage({
    super.key,
    required this.initialJson,
    required this.initialJsonSchema,
  });

  JsonSchema get jsonSchema => JsonSchema.create(initialJsonSchema);

  [@override](/user/override)
  State<EditorPage> createState() => _EditorPageState();
}

class _EditorPageState extends State<EditorPage> {
  late final MostKeyValueEditorController controller;

  [@override](/user/override)
  void initState() {
    super.initState();
    controller = MostKeyValueEditorController(
      initialState: EditorState.fromAccessor(JsonAccessor()),
      onChangedTransformer: ValidateCommand(
        const EditorStateValidator.merge([
          PropertiesValidator(),
          UnspecifiedPropertiesValidator(),
          JsonSchemaValidator(),
          MockNameValidator(),
        ]),
      ),
    );

    // 初始化控制器状态
    controller
      ..executeCommand(SeedJsonCommand(widget.initialJson))
      ..executeCommand(SeedJsonSchemaCommand(widget.jsonSchema));
  }

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

  // 复制到剪贴板的方法
  void _copyToClipboard(MostKeyValueEditorController controller) {
    final map = controller.jsonAccessor.read();
    Clipboard.setData(ClipboardData(text: json.encode(map)));
  }

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('Editor Demo'),
        actions: [
          Padding(
            padding: const EdgeInsets.all(8.0),
            child: ElevatedButton.icon(
              onPressed: () => _copyToClipboard(controller),
              label: const Text('复制'),
              icon: const Icon(Icons.copy),
            ),
          ),
        ],
      ),
      body: Center(
        child: ConstrainedBox(
          constraints: const BoxConstraints(maxWidth: 800),
          child: MostKeyValueEditor(
            controller: controller,
            inputBuilders: const [],
          ),
        ),
      ),
    );
  }
}

// 自定义验证器，用于验证名字是否为“John Doe”
class MockNameValidator extends EditorStateValidator {
  const MockNameValidator();

  [@override](/user/override)
  List<ValidationMessage> validate(EditorState state) {
    final firstName = state.jsonAccessor.getValue('person.first_name');
    final lastName = state.jsonAccessor.getValue('person.last_name');
    return firstName == "John" && lastName == "Doe"
        ? [
            const ValidationMessage.propertyError(
              path: "person.first_name",
              message: "请使用真实姓名",
            ),
            const ValidationMessage.propertyError(
              path: "person.last_name",
              message: "请使用真实姓名",
            ),
          ]
        : [];
  }
}