Flutter自动生成表单插件json_gen_form的使用

JSON_GEN_FORM

使用JSON生成Flutter表单，支持多种内置表单控件、验证、自定义布局、自定义样式以及无限嵌套的表单分组。

特性

• 使用JSON渲染表单
• 表单验证
• 自定义表单样式
• 自定义布局（行、列）
• 无限表单分组和嵌套
• 可以通过方法修改整个表单值或单独的表单控件值
• 支持的表单控件：
  • 文本框
  • 密码框
  • 多行文本框
  • 数字输入框
  • 单选按钮
  • 复选框
  • 下拉选择框
  • 开关
  • 多媒体上传
  • 日期选择器
  • 时间选择器
  • 日期时间选择器

使用

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

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

class MainApp extends StatefulWidget {
  const MainApp({super.key});

  @override
  State<MainApp> createState() => _MainAppState();
}

class _MainAppState extends State<MainApp> {
  final GlobalKey _key = GlobalKey<JsonGenFormState>();
  final List<dynamic> _data = [
    {
      "type": "group",
      "label": "分组1",
      "field": "group1",
      "children": [
        {
          "type": "row",
          "gutter": 10,
          "children": [
            {
              "type": "col",
              "child": {"type": "text", "field": "name", "label": "组名1"}
            },
            {
              "type": "col",
              "child": {"type": "number", "field": "num", "label": "人数"}
            }
          ]
        },
        {"type": "text", "field": "manage", "label": "管理员"}
      ]
    },
    {
      "type": "text",
      "field": "name",
      "label": "姓名",
      "value": "隔壁老王",
      "readonly": true,
      "placeholder": "请输入姓名",
      "rules": [
        {"required": true, "message": "请输入姓名"}
      ]
    },
    {
      "type": "password",
      "field": "password",
      "label": "密码",
      "value": null,
      "placeholder": "请输入密码",
      "rules": [
        {"required": true, "message": "请输入密码"},
        {
          "pattern": "^[a-zA-Z0-9_-]{6,16}$",
          "message": "密码必须为6-16位字母、数字、下划线、减号"
        }
      ]
    },
    {
      "type": "textarea",
      "field": "remark",
      "label": "自我介绍",
      "value": null,
      "placeholder": "请简单介绍一下你自己",
      "rules": []
    },
    {
      "type": "number",
      "field": "age",
      "label": "年龄",
      "value": null,
      "placeholder": "请输入年龄",
      "rules": [
        {"required": true, "message": "请输入年龄"},
        {"min": 18, "message": "年龄必须大于18岁"}
      ]
    },
    {
      "type": "select",
      "field": "province",
      "label": "省份",
      "value": 1,
      "placeholder": "请选择省份",
      "options": [
        {"label": "山西", "value": 1},
        {"label": "陕西", "value": 2},
        {"label": "山东", "value": 3}
      ]
    },
    {
      "type": "cascade",
      "field": "city",
      "label": "城市",
      "value": null,
      "placeholder": "请选择城市",
      "options": [
        {
          "label": "山西",
          "value": 1,
          "children": [
            {
              "label": "太原",
              "value": 11,
              "children": [
                {"label": "小店区", "value": 111},
                {"label": "迎泽区", "value": 112}
              ]
            },
            {"label": "吕梁", "value": 12},
            {"label": "大同", "value": 13}
          ]
        },
        {
          "label": "陕西",
          "value": 2,
          "children": [
            {"label": "西安", "value": 21},
            {"label": "咸阳", "value": 22}
          ]
        }
      ]
    },
    {
      "type": "date",
      "field": "birthday",
      "label": "生日",
      "value": null,
      "placeholder": "请选择生日"
    },
    {
      "type": "radio",
      "field": "sex",
      "label": "性别",
      "value": null,
      "options": [
        {"label": "男", "value": 1},
        {"label": "女", "value": 2},
        {"label": "保密", "value": 0}
      ]
    },
    {
      "type": "checkbox",
      "field": "hobby",
      "label": "爱好",
      "value": [],
      // "direction": "vertical",
      "options": [
        {"label": "篮球", "value": "basketball"},
        {"label": "足球", "value": "football"},
        {"label": "羽毛球", "value": "badminton"}
      ],
      "rules": [
        {"required": true, "message": "请选择爱好"}
      ]
    },
    {
      "type": "switch",
      "field": "agree",
      "label": "同意协议",
      "value": null,
      "rules": [
        {"required": true, "message": "请同意协议"}
      ]
    },
    {
      "type": "media",
      "field": "media",
      "label": "上传照片视频",
      "value": null,
      "rules": null,
      "multiple": true
    }
  ];

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      theme: ThemeData(
        brightness: Brightness.light,
        useMaterial3: true,
      ),
      home: Scaffold(
        appBar: AppBar(
          title: const Text('json gen form'),
        ),
        body: SafeArea(
          child: SingleChildScrollView(
            physics: const BouncingScrollPhysics(),
            padding: const EdgeInsets.symmetric(
              horizontal: 20.0,
              vertical: 20.0,
            ),
            child: Column(
              children: [
                JsonGenForm(
                  key: _key,
                  config: _data,
                  decoration: JsonGenFormDecoration(
                    // groupLabelWrap: (Widget child, dynamic data) {
                    //   return Container(
                    //     margin: const EdgeInsets.only(bottom: 5),
                    //     child: child,
                    //   );
                    // },
                    controlLabelWrap: (Widget child, dynamic data) {
                      return Container(
                        margin: const EdgeInsets.only(bottom: 5),
                        child: child,
                      );
                    },
                    controlWrap: (Widget child, dynamic data) {
                      return Container(
                        margin: const EdgeInsets.only(bottom: 10),
                        child: child,
                      );
                    },
                  ),
                ),
                ElevatedButton(
                  onPressed: () async {
                    final formState = _key.currentState as JsonGenFormState;
                    try {
                      final data = await formState.validate();
                      debugPrint('提交成功 $data');
                    } catch (e) {
                      debugPrint('Validation error: $e');
                    }
                  },
                  child: const Text('提交'),
                ),
              ],
            ),
          ),
        ),
      ),
    );
  }
}

通用参数

除了group, row, 和 col，所有类型都有以下通用参数。所有类型都有extra。

表单类型

分组 (group)

文本框 (text)

密码框 (password)

多行文本框 (textarea)

数字输入框 (number)

单选按钮 (radio)

复选框 (checkbox)

下拉选择框 (select)

开关 (switch)

多媒体上传 (media)

iOS配置 (info.plist)

<key>NSCameraUsageDescription</key>
<string>需要相机拍照或扫描二维码</string>
<key>NSPhotoLibraryUsageDescription</key>
<string>需要访问相册选择照片或视频</string>
<key>NSMicrophoneUsageDescription</key>
<string>需要麦克风录制视频</string>

Android配置 (AndroidManifest.xml)

<uses-permission android:name="android.permission.CAMERA" />