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

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

插件介绍

dynamic_forms_generator 是一个 Dart 库，用于根据简单的 YAML 格式自动生成模型和解析器部分。它简化了在 flutter_dynamic_forms 中编写单个组件所需的大量样板代码，特别是在模型和解析类中。

使用方法

1. 将此包作为开发依赖项添加到项目中，并与 build_runner 一起使用：

dev_dependencies:
  build_runner: ^1.0.0
  dynamic_forms_generator: <latest version>

1. 可选地在项目的根目录中添加一个 build.yaml 文件以覆盖默认导入：

targets:
  $default:
    builders:
      dynamic_forms_generator:dynamicFormsBuilder:
        options:
          default_imports:
            - "../components.dart"
            components_to_ignore:
            - "form_element.yaml"
            - "validation.yaml"
            comments:
            - "ignore_for_file: unused_import"
            strongly_cast_properties: false

• default_imports 会为模型和解析文件生成这个导入行。
• components_to_ignore 不会为列出的组件生成任何内容。特别是 form_element.yaml 和 validation.yaml 已经有它们自己的模型和解析器，所以不需要显式列出它们。原因是这些类已经在 dynamic_forms 库中包含，而其他组件可以扩展它们，生成器需要所有 YAML 定义才能正确分析其结构。

1. 对于每个组件，你需要相应的 component_name.yaml 文件，格式如下：

type: checkBox
parentType: formElement
properties:
  label:
    type: string
  value:
    type: bool
    default: false
    isMutable: true

1. 运行以下命令来生成模型和解析器：

pub run build_runner build

或如果使用 Flutter：

flutter packages pub run build_runner build

代替 build，你可以使用 watch 来跟踪更改。更多信息，请参阅 build_runner 包。

组件描述结构

每个组件应包含所有必要的信息以便能够以 XML 格式表示。

示例组件定义：

type: checkBox
parentType: formElement
properties:
  label:
    type: string
  value:
    type: bool
    default: false
    isMutable: true

type: container
parentType: formElement
properties:
  children:
    type: formElement[]
contentProperty: children

type: singleSelectGroup<tSingleSelectChoice extends singleSelectChoice>
parentType: formElement
properties:
  value:
    type: string
    isMutable: true
  choices:
    type: tSingleSelectChoice[]

type: dropdownButton
parentType: singleSelectGroup<dropdownOption>

类型

类型可以设置为组件属性中的 type，例如：

• int - 64 位二进制补码整数
• decimal
• bool
• string
• dateTime - 标准化日期时间格式（ISO 8601）
• typename 结尾为 valueElement 或 ValueElement（例如 moneyValueElement）- 用于结构
• typename 结尾为 enumElement 或 EnumElement（例如 exampleEnumElement）- 用于枚举
• enum - 仅用于 enumElement 组件
• customformElement - 其他组件的名称
• customformElement[] - 其他组件的数组

每个类型都可以通过附加 ? 后缀使其可选。

YAML 到 XML 转换

YAML 转换为 XML：

• <element propertyName="property value"/> 表示直接属性值
• 复杂值也可以写成：

  <element>
    <element.propertyName>
        property value
    </element.propertyName>
  </element>
  

YAML 到 JSON 转换

JSON 转换类似于 YAML 到 XML，但不考虑 contentProperty。

示例代码

void main() {
  print('Hello world');
}

示例 demo

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

void main() async () async {
  final component = Component(
    type: 'checkbox',
    parentType: 'formElement',
    properties: {
      'label': {'type': 'string'},
      'value': {'type': 'bool', 'default': false, 'isMutable': true},
    },
  );

  final model = Model(component);
  final parser = Parser(model);

  runApp(MaterialApp(
    home: Scaffold(
      appBar: AppBar(title: Text('Dynamic Form Demo')),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            TextField(
              controller: TextEditingController(text: model.value),
              decoration: InputDecoration(labelText: 'Checkbox Value'),
            ),
            RaisedButton(
              onPressed: () {
                if (model.value == null) {
                  model.value = false;
                } else {
                  model.value = !model.value;
                }
                parser.parse(model);
              },
              child: Text(model.value.toString()),
            ),
          ],
        ),
      ),
    ),
  ));
}

class Component {
  String type;
  String parentType;
  Map<String, Map<String, dynamic>> properties;

  Component({this.type, this.parentType, this.properties});
}

class Model {
  Component component;
  bool value;

  Model(this.component);
}

class Parser {
  Model model;

  Parser(this.model);

  void parse(Model model) {
    this.model = model;
  }
}