Flutter动态表单生成插件json_dynamic_form的使用

发布于 1周前 作者 phonegap100 来自 Flutter

Flutter动态表单生成插件json_dynamic_form的使用

json_dynamic_form 是一个基于JSON的基本表单生成库。它允许开发者通过定义JSON格式的数据来动态生成表单字段。

安装

在 pubspec.yaml 文件中添加依赖：

dependencies:
  ...
  json_dynamic_form: 1.0.0

然后在终端运行以下命令以获取依赖项：

flutter packages get

示例

以下是一个完整的示例，展示了如何使用 json_dynamic_form 插件生成动态表单。

import 'dart:convert';

import 'package:flutter/material.dart';
import 'package:json_dynamic_form/JsonDynamicForm.dart';
import 'package:json_dynamic_form/models/Autogenerated.dart';
import 'package:json_dynamic_form/models/Values.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: MyHomePage(title: 'Flutter Demo Home Page'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  MyHomePage({Key? key, this.title}) : super(key: key);
  final String? title;

  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  List<dynamic> data = [
    {
      "type": "text",
      "label": "Text",
      "description": "Enter your name",
      "placeholder": "Enter your name",
      "regex": "",
      "errorText": "",
      "required": true,
      "name": "text-1622684775448"
    },
    {
      "type": "email",
      "label": "Email",
      "description": "Enter your email",
      "placeholder": "Enter your email",
      "regex": "",
      "errorText": "Please enter a valid email",
      "required": true,
      "name": "email-1622684776606"
    },
    {
      "type": "phone",
      "label": "Phone",
      "description": "Enter your phone",
      "placeholder": "Enter your phone",
      "regex": "",
      "errorText": "Please enter a valid phone number",
      "required": false,
      "name": "phone-1622684777910"
    },
    {
      "type": "checkbox",
      "label": "Checkbox",
      "description": "Checkbox",
      "values": [
        {"label": "Option 1", "value": "option-1"},
        {"label": "Option 2", "value": "option-2"}
      ],
      "name": "checkbox-1622684784550"
    },
    {
      "type": "radio",
      "label": "Radio",
      "description": "Radio boxes",
      "values": [
        {"label": "Option 1", "value": "option-1"},
        {"label": "Option 2", "value": "option-2"}
      ],
      "name": "radio-1622684785878"
    },
    {
      "type": "number",
      "label": "Number",
      "description": "Age",
      "placeholder": "Enter your age",
      "min": 12,
      "max": 90,
      "name": "number-1622684779623"
    },
    {
      "type": "autocomplete",
      "label": "Select",
      "description": "Select",
      "placeholder": "Select",
      "values": [
        {"label": "Option 1", "value": "option-1"},
        {"label": "Option 2", "value": "option-2"},
        {"label": "Option 3", "value": "option-3"}
      ],
      "name": "autocomplete-1622684787710"
    },
    {
      "type": "autocomplete",
      "label": "Select",
      "description": "Select",
      "placeholder": "Select",
      "values": [
        {"label": "Option 4", "value": "option-4"},
        {"label": "Option 5", "value": "option-5"},
        {"label": "Option 6", "value": "option-6"}
      ],
      "name": "autocomplete-prueba"
    }
  ];

  late JsonDynamicForm jsonDynamicForm;
  List<Widget>? fields = List<Widget>.empty(growable: true);

  @override
  void initState() {
    super.initState();

    jsonDynamicForm = JsonDynamicForm(data: data, setState: setState);

    fields = jsonDynamicForm.generateFields();
  }

  @override
  Widget build(BuildContext context) {
    fields = jsonDynamicForm.generateFields(firstTime: false);
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title!),
      ),
      body: SingleChildScrollView(
        child: Column(children: [
          Column(
              crossAxisAlignment: CrossAxisAlignment.start, children: fields!),
          TextButton(
              onPressed: getData,
              child: Text("Get the data!"))
        ]),
      ),
    );
  }

  getData() {
    print(json.encode(jsonDynamicForm.printData()));
  }

  genericMethod(Autogenerated item, dynamic value) {
    setState(() {
      item.controller = value;
    });
  }

  genericCheckMethod(Values values, dynamic value) {
    setState(() {
      values.controller = value;
    });
  }
}

代码说明

  1. 导入必要的包：

    import 'dart:convert';
import 'package:flutter/material.dart';
import 'package:json_dynamic_form/JsonDynamicForm.dart';
import 'package:json_dynamic_form/models/Autogenerated.dart';
import 'package:json_dynamic_form/models/Values.dart';

  2. 定义主应用类 MyApp：

    class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: MyHomePage(title: 'Flutter Demo Home Page'),
    );
  }
}

  3. 定义表单状态类 _MyHomePageState：

    class _MyHomePageState extends State<MyHomePage> {
  List<dynamic> data = [...]; // 表单数据

  late JsonDynamicForm jsonDynamicForm;
  List<Widget>? fields = List<Widget>.empty(growable: true);

  @override
  void initState() {
    super.initState();
    jsonDynamicForm = JsonDynamicForm(data: data, setState: setState);
    fields = jsonDynamicForm.generateFields();
  }

  @override
  Widget build(BuildContext context) {
    fields = jsonDynamicForm.generateFields(firstTime: false);
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title!),
      ),
      body: SingleChildScrollView(
        child: Column(children: [
          Column(
              crossAxisAlignment: CrossAxisAlignment.start, children: fields!),
          TextButton(
              onPressed: getData,
              child: Text("Get the data!"))
        ]),
      ),
    );
  }

  getData() {
    print(json.encode(jsonDynamicForm.printData()));
  }

  genericMethod(Autogenerated item, dynamic value) {
    setState(() {
      item.controller = value;
    });
  }

  genericCheckMethod(Values values, dynamic value) {
    setState(() {
      values.controller = value;
    });
  }
}

更多关于Flutter动态表单生成插件json_dynamic_form的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html

1 回复

更多关于Flutter动态表单生成插件json_dynamic_form的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html


当然，关于Flutter中的json_dynamic_form插件的使用，这里提供一个示例代码来展示如何动态生成表单。这个插件允许你从JSON配置生成复杂的表单，非常适合需要根据数据模型动态生成表单的场景。

首先，确保你已经在pubspec.yaml文件中添加了json_dynamic_form依赖：

dependencies:
  flutter:
    sdk: flutter
  json_annotation: ^4.0.1
  json_dynamic_widget: ^4.2.0 # json_dynamic_form依赖于json_dynamic_widget
  json_dynamic_form: ^4.2.0

然后运行flutter pub get来安装依赖。

接下来是一个完整的示例代码，展示如何使用json_dynamic_form插件动态生成表单：

import 'package:flutter/material.dart';
import 'package:json_annotation/json_annotation.dart';
import 'package:json_dynamic_widget/json_dynamic_widget.dart';
import 'package:json_dynamic_form/json_dynamic_form.dart';

part 'form_schema.g.dart'; // 用于生成JSON序列化代码

@JsonSerializable()
class FormSchema {
  final List<dynamic> schema;

  FormSchema({required this.schema});

  factory FormSchema.fromJson(Map<String, dynamic> json) => _$FormSchemaFromJson(json);
  Map<String, dynamic> toJson() => _$FormSchemaToJson(this);
}

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: MyHomePage(),
    );
  }
}

class MyHomePage extends StatefulWidget {
  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  late FormSchema formSchema;

  @override
  void initState() {
    super.initState();
    // 示例表单JSON配置
    String jsonSchema = '''
    [
      {
        "type": "text_form_field",
        "name": "name",
        "title": "Name",
        "validationRules": [
          {"type": "required"}
        ]
      },
      {
        "type": "dropdown_button_form_field",
        "name": "gender",
        "title": "Gender",
        "hint": "Select gender",
        "validators": [{"type": "required"}],
        "options": [
          {"value": "male", "title": "Male"},
          {"value": "female", "title": "Female"}
        ]
      },
      {
        "type": "checkbox_list_tile",
        "name": "hobbies",
        "title": "Hobbies",
        "options": [
          {"value": "reading", "title": "Reading"},
          {"value": "traveling", "title": "Traveling"},
          {"value": "sports", "title": "Sports"}
        ]
      }
    ]
    ''';

    // 解析JSON配置
    var schemaMap = jsonDecode(jsonSchema);
    formSchema = FormSchema(schema: schemaMap);
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Dynamic Form Example'),
      ),
      body: Padding(
        padding: const EdgeInsets.all(16.0),
        child: JsonFormBuilder(
          jsonSchema: formSchema.toJson(),
          onSubmit: (Map<String, dynamic> data) {
            // 处理表单提交数据
            print('Form Data: $data');
          },
        ),
      ),
    );
  }
}

在这个示例中：

  1. 我们定义了一个FormSchema类来封装表单的JSON配置，并使用json_annotation库来生成JSON序列化代码。
  2. 在MyHomePage的initState方法中，我们定义了一个示例表单的JSON配置，并将其解析为FormSchema对象。
  3. 在build方法中，我们使用JsonFormBuilder组件来根据JSON配置动态生成表单。
  4. 用户提交表单时，onSubmit回调将接收表单数据。

注意，为了简化示例，这里直接使用了JSON字符串。在实际应用中，你可能需要从服务器获取这些配置。

此外，确保运行flutter pub run build_runner build命令来生成form_schema.g.dart文件，这个文件包含了FormSchema类的JSON序列化和反序列化代码。

回到顶部