Flutter JSON表单生成插件simple_json_form的使用

Flutter JSON表单生成插件simple_json_form的使用

一个完整的表单生成器仍在开发中。此项目基于以下仓库：

• 简单Json构建器：Tanmoy Karmakar
• Json Schema表单：Instituto Iracema

规格

此库允许你从JSON文件创建一个包含多种字段类型的完整表单（如text、checkbox、multiselect、date、time、format1）。该包还提供了额外的备注选项。

它完全用Dart编写。❤️

安装

在你的pubspec.yaml文件中添加以下依赖：

dependencies:
  simple_json_form: ^0.0.3

简单使用

要集成简单的表单生成器，只需遵循给定的JSON模式并将其传递给formBuilder小部件即可。

JSON模式

// 完整示例可以在全局文件夹中找到，可以作为参考

// 多选（选项按钮）
{
  "form": [
    {
      "key": "informations",
      "properties": [
        "key": "identifier",
        "fields": ["1", "2", "3", "4", "5"],
        "title": "这是我的标题",
        "description": "这是我的描述",
        "type": "multiple",
      ]
    }
  ]
}

// 复选框
{
  "form": [
    {
      "key": "informations",
      "properties": [
        "key": "identifier",
        "fields": ["1", "2", "3", "4", "5"],
        "title": "这是我的标题",
        "description": "这是我的描述",
        "type": "checkbox"
      ]
    }
  ]
}

// 文本 - 数字
{
  "form": [
    {
      "key": "informations",
      "properties": [
        "key": "identifier",
        "title": "这是我的标题",
        "description": "这是我的描述",
        "type": "text",
        "is_mandatory": false,
        "readOnly": true,
        "validations": {
              "message": "这是我的消息",
          "length": {"min": 10, "max": 20},
        }
      ]
    }
  ]
}

// 日期
{
  "form": [
    {
      "key": "informations",
      "properties": [
        "key": "identifier",
        "title": "这是我的标题",
        "description": "这是我的描述",
        "type": "date",
        "is_mandatory": false,
      ]
    }
  ]
}

// 时间
{
  "form": [
    {
      "key": "informations",
      "properties": [
      "key": "identifier_boat",
      "title": "这是我的标题",
      "description": "这是我的描述",
      "type": "time",
      "is_mandatory": false,
    ]
  }
]

// 格式1
{
  "form": [
    {
      "key": "informations",
      "properties": [
        "key": "identifier_boat",
        "fields": ["1", "2", "3", "4", "5"],
        "title": "这是我的标题",
        "description": "这是我的描述",
        "type": "format1",
        "raw": [
          {
            "title": "菜单1",
            "description": "描述1",
            "properties": [
              {
                "key": "key_date",
                "title": "日期",
                "type": "date",
              },
            ]
          },
          {
            "title": "菜单2",
            "properties": [
              {
                "key": "key_trips",
                "title": "旅行",
                "type": "text",
              },
            ]
          },
        ]
      ]
    }
  ]
}

小部件实现

import 'dart:convert';

import 'package:example/constants/constants.dart';
import 'package:flutter/material.dart';
import 'package:simple_json_form/simple_json_form.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      //theme: ThemeData.dark(),
      title: '表单生成器示例',
      home: Scaffold(
        appBar: AppBar(
          title: const Text('材料应用栏'),
        ),
        body: SingleChildScrollView(
          child: Column(
            children: [
              SimpleJsonForm(
                jsonSchema: sampleData, // 使用你的JSON数据
                title: "员工绩效评估",
                titleStyle: const TextStyle(
                  fontWeight: FontWeight.bold,
                  fontSize: 15,
                ),
                description: "绩效评估",
                crossAxisAlignment: CrossAxisAlignment.center,
                index: 0,
                imageUrl: '',
                defaultValues: DefaultValues().copyWith(
                  nextButtonText: '下一步',
                  hintDropdownText: '请选择一个选项',
                  previousButtonText: '上一步',
                  submitButtonText: '提交',
                  validationDescription: '缺少一些必填字段',
                  validationTitle: '验证失败',
                  fieldRequired: '字段是必填项',
                ),
                descriptionStyleText: const TextStyle(
                  color: Colors.lightBlue,
                ),
                titleStyleText: const TextStyle(
                  fontWeight: FontWeight.bold,
                  fontSize: 16,
                  color: Colors.blue,
                ),
                onSubmit: (val) {
                  if (val == null) {
                    print("没有数据");
                  } else {
                    var json = jsonEncode(val.toJson());
                    print(json);
                  }
                },
              ),
            ],
          ),
        ),
      ),
    );
  }
}