Flutter表单构建插件forme的使用

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

Flutter表单构建插件forme的使用

Web Demo

您可以访问 Web Demo 来查看 forme 插件的实际效果。

Simple Usage

添加依赖

在您的 pubspec.yaml 文件中添加以下依赖:

dependencies:
  forme: ^latest_version
  forme_base_fields: ^latest_version

然后运行以下命令来安装这些依赖:

flutter pub add forme
flutter pub add forme_base_fields 

创建 Forme 表单

下面是一个简单的示例,展示了如何创建一个带有文本输入框的表单:

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

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

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

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

class _MyHomePageState extends State<MyHomePage> {
  final FormeKey key = FormeKey();

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Forme Example'),
      ),
      body: Padding(
        padding: const EdgeInsets.all(16.0),
        child: Forme(
          key: key,
          child: Column(
            children: [
              FormeTextField(
                name: 'username',
                decoration: const InputDecoration(labelText: 'Username'),
              ),
              SizedBox(height: 20),
              ElevatedButton(
                onPressed: () async {
                  final snapshot = await key.validate();
                  if (snapshot.isValid) {
                    print('Form is valid');
                  } else {
                    print('Form is invalid');
                  }
                },
                child: Text('Submit'),
              ),
            ],
          ),
        ),
      ),
    );
  }
}

Forme Attributes

以下是 Forme 的一些常用属性:

属性 是否必需 类型 描述
key FormeKey 全局键,用于控制表单
child Widget 表单内容部件
onFieldStatusChanged FormeFieldStatusChanged 监听字段状态变化
initialValue Map<String, dynamic> 初始值,会覆盖 FormField 的初始值

更多属性请参考插件文档。

FormeField

每个 FormeField 都支持以下属性:

属性 是否必需 类型 描述
name String 字段的唯一标识符
readOnly bool 字段是否只读,默认为 false
builder FormeFieldBuilder 构建字段内容
enabled bool 字段是否启用,默认为 true

更多属性请参考插件文档。

Validation

Async Validation

异步验证可以通过指定 asyncValidator 实现。与同步验证不同的是,异步验证返回一个 Future<String> 而不是 String

FormeValidates

FormeValidates 提供了一些常用的验证器,例如:

  • notNull: 检查值是否为 null
  • notEmpty: 检查字符串或集合是否为空
  • email: 检查值是否为有效的电子邮件地址

示例:

FormeTextField(
  name: 'email',
  decoration: const InputDecoration(labelText: 'Email'),
  validator: FormeValidates.email(errorText: '请输入有效的电子邮件地址'),
),

Methods

FormeKey 和 FormeState

通过 FormeKey 可以获取和操作表单的状态。例如:

// 获取表单的值
Map<String, dynamic> data = key.value;

// 设置表单的值
key.value = {'username': 'newUsername'};

// 验证表单
Future<FormeValidateSnapshot> future = key.validate();

FormeFieldState

通过 FormeFieldState 可以获取和操作字段的状态。例如:

// 获取字段的值
String value = field.value;

// 设置字段的值
field.value = 'newValue';

// 验证字段
Future<FormeFieldValidateSnapshot> future = field.validate();

Listeners

监听器可以帮助您根据表单或字段的状态变化重建部件。例如:

FormeFieldsValidationListener(
  names: const {'password', 'confirm'},
  builder: (context, validation) {
    if (validation == null || !validation.isInvalid) {
      return const SizedBox.shrink();
    }
    return Padding(
      padding: const EdgeInsets.only(left: 24),
      child: Text(
        validation.validations.values.first.error!,
        style: TextStyle(color: Colors.red),
      ),
    );
  },
)

Custom Field

您可以创建自定义字段。例如:

FormeField<String>(
  name: 'customField',
  initialValue: 'currentValue',
  builder: (FormeFieldState<String> state) {
    return TextButton(
      onPressed: () {
        state.readOnly ? null : state.didChange('newValue');
      },
      child: Text(state.value),
    );
  },
)

以上是 forme 插件的基本用法和示例代码。希望对您有所帮助!


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

1 回复

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


当然,forme 是一个用于 Flutter 的表单构建插件,它提供了一种简洁且强大的方式来创建和管理表单。以下是一个使用 forme 插件构建表单的代码示例。

首先,确保在你的 pubspec.yaml 文件中添加 forme 依赖:

dependencies:
  flutter:
    sdk: flutter
  forme: ^x.y.z  # 请替换为最新版本号

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

接下来是一个使用 forme 插件构建表单的完整示例:

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

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

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

class MyFormScreen extends StatefulWidget {
  @override
  _MyFormScreenState createState() => _MyFormScreenState();
}

class _MyFormScreenState extends State<MyFormScreen> {
  final _formKey = GlobalKey<FormState>();
  final _formSchema = FormSchema(
    fields: [
      FormSchemaField(
        name: 'name',
        label: 'Name',
        validators: [
          RequiredValidator(message: 'Name is required'),
          LengthValidator(min: 3, max: 20, message: 'Name must be between 3 and 20 characters'),
        ],
        widgetBuilders: {
          FormFieldType.text: (context, value, onChange, onSubmit) {
            return TextField(
              value: value ?? '',
              onChanged: onChange,
              onEditingComplete: onSubmit,
              decoration: InputDecoration(labelText: 'Name'),
            );
          },
        },
      ),
      FormSchemaField(
        name: 'email',
        label: 'Email',
        validators: [
          RequiredValidator(message: 'Email is required'),
          EmailValidator(message: 'Invalid email address'),
        ],
        widgetBuilders: {
          FormFieldType.text: (context, value, onChange, onSubmit) {
            return TextField(
              value: value ?? '',
              onChanged: onChange,
              onEditingComplete: onSubmit,
              decoration: InputDecoration(labelText: 'Email'),
              keyboardType: TextInputType.emailAddress,
            );
          },
        },
      ),
      FormSchemaField(
        name: 'password',
        label: 'Password',
        validators: [
          RequiredValidator(message: 'Password is required'),
          LengthValidator(min: 6, message: 'Password must be at least 6 characters long'),
        ],
        widgetBuilders: {
          FormFieldType.password: (context, value, onChange, onSubmit) {
            return TextField(
              value: value ?? '',
              onChanged: onChange,
              onEditingComplete: onSubmit,
              decoration: InputDecoration(labelText: 'Password'),
              obscureText: true,
            );
          },
        },
      ),
    ],
  );

  void _submitForm() {
    final form = _formKey.currentState;
    if (form!.validate()) {
      form.save();
      print('Form submitted: ${form.value}');
      // 在这里处理表单提交逻辑,例如发送到服务器
    }
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Forme Demo'),
      ),
      body: Padding(
        padding: const EdgeInsets.all(16.0),
        child: Forme(
          key: _formKey,
          schema: _formSchema,
        ),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: _submitForm,
        tooltip: 'Submit',
        child: Icon(Icons.send),
      ),
    );
  }
}

在这个示例中,我们定义了一个包含三个字段(名称、电子邮件和密码)的表单。每个字段都有相应的标签和验证规则。我们使用 FormSchemaFormSchemaField 来定义表单的结构和验证逻辑。Forme 小部件用于根据定义的架构渲染表单。

当用户点击提交按钮时,_submitForm 方法会验证表单,如果验证通过,则保存表单数据并打印出来。

这个示例展示了如何使用 forme 插件来构建和管理一个包含多个字段和验证规则的表单。你可以根据需要进一步扩展和自定义这个示例。

回到顶部