Flutter表单构建插件wo_form的使用

Flutter表单构建插件wo_form的使用

wo_form 是一个功能丰富的 Dart 包，旨在使表单处理更加简单高效。通过 wo_form，您可以轻松地将表单转换为和从 JSON 进行数据处理，完全控制表单的渲染，并利用一系列预构建的高级小部件来处理基本输入。

特性

  • Jsonify/Unjsonify Forms（表单的JSON化/非JSON化）：轻松地将表单转换为和从 JSON 格式，从而简化数据处理。
  • 自定义渲染：完全控制表单的渲染方式，实现高度可定制的用户体验。
  • 预构建的高级小部件：访问各种针对常见输入类型的高级小部件，节省在表单创建上的时间和精力。
  • 轻松集成：快速将 wo_form 集成到您的项目中，并优化表单管理流程。

示例

import 'package:flutter/material.dart';
import 'package:flutter_bloc/flutter_bloc.dart';
import 'package:wo_form/wo_form.dart';

// 定义枚举类型
enum ReportType {
  verbalAbuse,
  cheating,
  fairPlay,
  other;
}

// 创建报告页面
class ReportPage extends StatelessWidget {
  const ReportPage({super.key});

  [@override](/user/override)
  Widget build(BuildContext context) {
    return WoForm(
      // 设置导出设置
      exportSettings: const ExportSettings(
        metadata: {
          'reporterId': 'me',
          'reportedId': 'him',
        },
      ),
      // 设置UI设置
      uiSettings: const WoFormUiSettings(
        titleText: 'Report a user', // 表单标题
        submitMode: StandardSubmitMode(
          submitText: 'Send', // 提交按钮文本
          disableSubmitMode: DisableSubmitButton.whenInvalid, // 禁用提交按钮当表单无效时
        ),
      ),
      // 定义表单输入项
      inputs: [
        // 下拉选择框
        SelectInput<ReportType>(
          id: 'type',
          availibleValues: ReportType.values,
          minCount: 1,
          maxCount: 1,
          uiSettings: SelectInputUiSettings(
            labelText: 'Reason', // 文本标签
            valueBuilder: (type) => Text(
              switch (type) {
                null => 'Select a reason',
                ReportType.cheating => 'Cheating',
                ReportType.fairPlay => 'Fair play',
                ReportType.verbalAbuse => 'Verbal abuse',
                ReportType.other => 'Other',
              },
            ),
          ),
        ),
        // 文本输入框
        const StringInput(
          id: 'message',
          uiSettings: StringInputUiSettings(
            hintText: 'Tell us more !', // 提示文本
            textCapitalization: TextCapitalization.sentences, // 句子首字母大写
            maxLines: 5, // 最大行数
          ),
        ),
        // 布尔输入框
        const BooleanInput(
          id: 'block',
          uiSettings: BooleanInputUiSettings(
            labelText: 'Block this user ?', // 文本标签
            controlType: BooleanFieldControlType.checkbox, // 控件类型为复选框
            controlAffinity: ListTileControlAffinity.leading, // 控件位置在列表项的左侧
          ),
        ),
      ],
      // 提交时的操作
      onSubmitting: (_, __) async {
        await Future<void>.delayed(const Duration(seconds: 3));
        // 在这里执行您的操作
      },
      // 提交成功时的操作
      onSubmitSuccess: (context) {
        // 关闭页面
      },
    ).toPage();
  }
}

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

1 回复

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


当然，以下是一个关于如何在Flutter中使用wo_form插件来构建表单的示例代码。wo_form是一个用于快速创建和管理表单的Flutter插件，它提供了丰富的组件和配置选项来简化表单的构建过程。

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

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

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

接下来，是一个简单的Flutter应用示例，演示如何使用wo_form来构建表单：

import 'package:flutter/material.dart';
import 'package:wo_form/wo_form.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(),
    );
  }
}

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

class _MyHomePageState extends State<MyHomePage> {
  // 用于存储表单数据的变量
  final formKey = GlobalKey<FormState>();

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('wo_form 示例'),
      ),
      body: Padding(
        padding: const EdgeInsets.all(16.0),
        child: Form(
          key: formKey,
          child: Column(
            crossAxisAlignment: CrossAxisAlignment.start,
            children: [
              // 使用wo_form的WoFormItem来创建表单项
              WoFormItem(
                label: '姓名',
                formField: TextFormField(
                  decoration: InputDecoration(border: OutlineInputBorder()),
                ),
              ),
              WoFormItem(
                label: '邮箱',
                formField: TextFormField(
                  decoration: InputDecoration(border: OutlineInputBorder()),
                  keyboardType: TextInputType.emailAddress,
                ),
              ),
              WoFormItem(
                label: '密码',
                formField: TextFormField(
                  decoration: InputDecoration(border: OutlineInputBorder()),
                  obscureText: true,
                ),
              ),
              SizedBox(height: 20),
              ElevatedButton(
                onPressed: () {
                  if (formKey.currentState!.validate()) {
                    formKey.currentState!.save();
                    // 这里可以添加表单提交后的逻辑
                    ScaffoldMessenger.of(context).showSnackBar(
                      SnackBar(content: Text('表单提交成功！')),
                    );
                  }
                },
                child: Text('提交'),
              ),
            ],
          ),
        ),
      ),
    );
  }
}

在这个示例中，我们创建了一个简单的Flutter应用，其中包含一个使用wo_form插件构建的表单。表单包含三个字段：姓名、邮箱和密码，以及一个提交按钮。

注意，这个示例中并没有直接使用wo_form提供的全部高级功能，如动态表单项、验证规则等。wo_form插件提供了更多的配置选项和简化表单构建的方法，你可以参考其官方文档来深入了解并应用这些功能。

要查看wo_form的更多功能和示例，请访问其GitHub页面或查阅相关文档。

回到顶部