Flutter表单构建插件forme的使用
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
更多关于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),
),
);
}
}
在这个示例中,我们定义了一个包含三个字段(名称、电子邮件和密码)的表单。每个字段都有相应的标签和验证规则。我们使用 FormSchema
和 FormSchemaField
来定义表单的结构和验证逻辑。Forme
小部件用于根据定义的架构渲染表单。
当用户点击提交按钮时,_submitForm
方法会验证表单,如果验证通过,则保存表单数据并打印出来。
这个示例展示了如何使用 forme
插件来构建和管理一个包含多个字段和验证规则的表单。你可以根据需要进一步扩展和自定义这个示例。