Flutter表单构建插件schema_form_builder的使用

Flutter表单构建插件schema_form_builder的使用

schema_form_builder 是一个用于从JSON模式动态生成表单的Flutter包。该插件通过允许开发者通过JSON定义表单来简化表单创建过程，从而减少样板代码，并使表单定制更加容易。

特性

  • 基于JSON的表单生成：使用JSON模式定义快速构建复杂的表单。
  • 验证：支持各种验证规则，如必填字段、最小/最大长度等。
  • 本地化：轻松将表单字段本地化为多种语言。
  • 自定义小部件：通过自定义字段类型和UI组件扩展功能。
  • 媒体捕获：直接从表单中通过相机或图库捕获图像。

安装

在你的 pubspec.yaml 文件中添加该包：

dependencies:
  schema_form_builder: ^0.0.1

然后运行以下命令：

flutter pub get

使用

1. 导入包

import 'package:schema_form_builder/schema_form_builder.dart';

2. 定义JSON模式

const formSchema = {
  "pages": [
    {
      "name": "driverDetails",
      "title": {"en": "Driver Details"},
      "fields": [
        {
          "type": "text",
          "name": "driverName",
          "label": {"en": "Driver Name"},
          "validation": {"required": true, "minLength": 3}
        },
        {
          "type": "capture",
          "camera": "back",
          "gallery": true,
          "name": "driverLicenseFront",
          "label": {"en": "Driver License - Front"},
          "validation": {"required": true},
          "custom": {"placeholder": "assets/images/license-front.png"}
        }
      ]
    }
  ]
};

3. 渲染表单

SchemaForm.builder(
  schema: formSchema,
  locale: 'en', // 指定语言区域
  onSubmit: (data) {
    print("Form submitted with data: $data");
  },
  builder: (context, form, options) {
    return Scaffold(
      appBar: AppBar(title: Text(options.title)),
      body: Padding(padding: EdgeInsets.all(16), child: form),
    );
  },
);

更多关于Flutter表单构建插件schema_form_builder的使用的实战教程也可以访问 https://www.itying.com/category-92-b0.html

1 回复

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


当然，关于schema_form_builder插件在Flutter中用于构建表单的使用，下面是一个示例代码案例，展示了如何配置和使用这个插件来根据JSON Schema动态生成表单。

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

dependencies:
  flutter:
    sdk: flutter
  schema_form_builder: ^最新版本号  # 请替换为实际的最新版本号

然后，运行flutter pub get来获取依赖。

接下来是一个完整的示例代码，展示了如何使用schema_form_builder：

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

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

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

class SchemaFormDemo extends StatefulWidget {
  @override
  _SchemaFormDemoState createState() => _SchemaFormDemoState();
}

class _SchemaFormDemoState extends State<SchemaFormDemo> {
  final GlobalKey<FormState> _formKey = GlobalKey<FormState>();
  late Map<String, dynamic> formData;

  @override
  void initState() {
    super.initState();
    formData = {};
  }

  final JsonSchema schema = JsonSchema(
    type: 'object',
    properties: {
      'name': JsonSchema(
        type: 'string',
        title: 'Name',
      ),
      'email': JsonSchema(
        type: 'string',
        title: 'Email',
        format: 'email',
      ),
      'age': JsonSchema(
        type: 'integer',
        title: 'Age',
        minimum: 0,
      ),
    },
    required: ['name', 'email'],
  );

  void _submit() {
    if (_formKey.currentState!.validate()) {
      _formKey.currentState!.save();
      print('Form Data: $formData');
    }
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Schema Form Builder Demo'),
      ),
      body: Padding(
        padding: const EdgeInsets.all(16.0),
        child: Form(
          key: _formKey,
          child: SchemaFormBuilder(
            schema: schema,
            formData: formData,
            onChanged: (data) {
              setState(() {
                formData = data;
              });
            },
          ),
        ),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: _submit,
        tooltip: 'Submit',
        child: Icon(Icons.check),
      ),
    );
  }
}

代码说明：

  1. 依赖引入：在pubspec.yaml中添加schema_form_builder依赖。

  2. 主应用：MyApp是一个简单的Flutter应用，设置了主题和主页。

  3. 表单页面：SchemaFormDemo是一个有状态的Widget，它初始化了表单数据formData。

  4. JSON Schema：定义了表单的JSON Schema，包括name、email和age字段，其中name和email是必填项。

  5. 表单构建：使用SchemaFormBuilder根据定义的Schema动态生成表单。

  6. 表单提交：通过Form的validate和save方法处理表单提交，并在控制台打印表单数据。

  7. UI布局：使用Scaffold、Padding和FloatingActionButton来布局应用界面。

这个示例展示了如何使用schema_form_builder插件根据JSON Schema动态生成表单，并处理表单数据的提交。你可以根据需要进一步自定义和扩展这个示例。

回到顶部