Flutter JSON Schema表单生成插件flutter_json_schema_form的使用

特性

• 根据提供的JSON Schema渲染表单UI
• 集成Flutter Material主题
• 可以通过编程获取与提供的JSON Schema匹配的表单内容作为JSON
• 可以通过编程填充表单
• 支持只读字段
• 标准字段
  • 对象：表单内的表单
    • 枚举：简单的选择选项UI
    • 字符串：避免重复代码
    • 数字：避免重复代码²
• 特殊字段
  • 文件字段：用于处理文件的自定义语法

入门指南

• 前往 jsonschema.net （或你最喜欢的JSON Schema生成工具）
• 提供你希望JSON Schema匹配的JSON示例
• 工具如jsonschema.net可以提供一个基础的JSON Schema，你可以轻松定制并使用它与flutter_json_schema_form
• 开始编码！
  • 下面会提供一些指导。

使用方法

将JSON Schema在你的应用中可用。最简单的方法是声明一个类型为Map<String, dynamic>的变量，并将其赋值为你提供的JSON Schema的键值结构。

final jsonSchema = JsonSchema.fromMap({
  "\$schema": "https://json-schema.org/draft/2019-09/schema",
  "\$id": "http://example.com/example.json",
  "type": "object",
  "default": {},
  "title": "Clinic",
  "description": "A Clinic is where patients can have aesthetic sessions with their doctors.",
  "required": [
    "name",
    "cnpj",
  ],
  "properties": {
    "name": {
      "type": "string",
      "default": "",
      "title": "Name",
      "examples": ["Rosa Clínica"]
    },
    "cnpj": {
      "type": "string",
      "default": "",
      "title": "CNPJ",
      "description": "It is unique for each clinic.",
      "examples": ["05.768.725/0001-48"]
    }
  },
  "examples": [
    {
      "name": "Rosa Clínica",
      "cnpj": "05.768.725/0001-48"
    }
  ]
});

然后，在你的应用中，你可以使用JSON Schema来渲染一个表单，如下所示：

class ClinicPageForm extends StatelessWidget {
  const ClinicPageForm({Key? key}) : super(key: key);

  [@override](/user/override)
  Widget build(BuildContext context) {
    return FlutterJsonSchemaForm(
      jsonSchema: jsonSchema,
      buttonText: 'Send',
    );
  }
}

如果你需要一个控制器来处理表单，你可以使用FlutterJsonSchemaFormController类：

class ClinicPageForm extends StatelessWidget {
  const ClinicPageForm({Key? key}) : super(key: key);

  final controller = FlutterJsonSchemaFormController(
    jsonSchema: jsonSchema,
  );

  [@override](/user/override)
  Widget build(BuildContext context) {
    return FlutterJsonSchemaForm(
      jsonSchema: jsonSchema,
      controller: controller,
      buttonText: 'Send',
    );
  }
}

其他信息

• 查看JSON Schema团队的网站：JSON-Schema.org
• 了解更多关于JSON Schema：Understanding JSON Schema
• 您对这个包的贡献将是惊人的！我们很乐意分析您的PR。您也可以使用GitHub仓库的问题部分来请求功能。
• 如果你发现任何问题，请在GitHub上提一个issue并告诉我们！
• 这个包由Iracema Institute of Research and Innovation社区自豪地使用和维护。如果您需要帮助，请联系我们！

示例代码

main.dart

import 'package:flutter/material.dart';
import 'package:flutter/rendering.dart';
import 'package:flutter_json_schema_form/flutter_json_schema_form.dart';
import 'package:json_schema_document/json_schema_document.dart';
import 'package:flutter_json_schema_form/controller/flutter_json_schema_form_controller.dart';

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

class MyAppWithState extends StatefulWidget {
  const MyAppWithState({Key? key}) : super(key: key);

  [@override](/user/override)
  _MyAppWithStateState createState() => _MyAppWithStateState();
}

class _MyAppWithStateState extends State<MyAppWithState> {
  Map<String, dynamic> formState = {
    "propertyType": "Apartment",
  };

  final controller = FlutterJsonSchemaFormController(
    jsonSchema: jsonSchema,
  );

  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      theme: ThemeData(
        primarySwatch: Colors.blue,
        inputDecorationTheme: const InputDecorationTheme(
          border: OutlineInputBorder(),
        ),
      ),
      home: Scaffold(
        appBar: AppBar(
          title: const Text('JSON Schema Form'),
        ),
        body: Center(
          child: Row(
            children: [
              Spacer(),
              Expanded(
                child: FlutterJsonSchemaForm(
                  controller: controller,
                  jsonSchema: controller.jsonSchema,
                  formState: formState,
                  onSubmit: () {
                    print(controller.data);
                  },
                  onChanged: (newFormState) {
                    setState(() {
                      formState = newFormState;
                    });
                  },
                ),
              ),
              Spacer(),
            ],
          ),
        ),
      ),
    );
  }
}

final jsonSchema = JsonSchema.fromMap({
  "\$schema": "http://json-schema.org/draft-07/schema",
  "\$id": "http://example.com/example.json",
  "type": "object",
  "title": "The root schema",
  "description": "The root schema comprises the entire JSON document.",
  "default": {},
  "examples": [
    {"name": "Casa 12", "propertyType": "House"}
  ],
  "required": ["name", "propertyType"],
  "properties": {
    "name": {
      "\$id": "#/properties/name",
      "type": "string",
      "title": "The name schema",
      "description": "An explanation about the purpose of this instance.",
      "default": "",
      "examples": ["Casa 12"]
    },
    "propertyType1": {
      "\$id": "#/properties/propertyType",
      "default": "",
      "description": "An explanation about the purpose of this instance.",
      "examples": ["House"],
      "title": "Tipo de Propriedade 1",
      "enum": ["House", "Apartment", "Flat", "Townhouse"],
      "type": "string"
    },
    "embedded": {
      "type": "object",
      "title": "The embedded schema",
      "description": "An explanation about the purpose of this instance.",
      "default": {},
      "properties": {
        "propertyType2": {
          "\$id": "#/properties/embedded/properties/propertyType",
          "default": "",
          "description": "An explanation about the purpose of this instance.",
          "examples": ["House"],
          "title": "Tipo de Propriedade 2",
          "enum": ["House", "Apartment", "Flat", "Townhouse"],
          "type": "string"
        },
      },
    }
  }
});