Flutter表单构建插件lite_forms的使用

lite_forms 是一个轻量级的 Flutter 表单构建插件，旨在简化表单的创建和管理。它提供了一种简洁的方式来处理表单字段、验证和提交。以下是如何使用 lite_forms 插件的详细步骤。

1. 添加依赖

首先，在 pubspec.yaml 文件中添加 lite_forms 依赖：

dependencies:
  flutter:
    sdk: flutter
  lite_forms: ^1.0.0  # 请确保使用最新版本

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

2. 导入插件

在你的 Dart 文件中导入 lite_forms：

import 'package:lite_forms/lite_forms.dart';

3. 创建表单

使用 LiteForm 组件来创建表单。LiteForm 是一个容器，用于包裹表单字段和处理表单的提交。

class MyForm extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return LiteForm(
      onSubmitted: (Map<String, dynamic> values) {
        // 处理表单提交
        print("Form submitted with values: $values");
      },
      child: Column(
        children: [
          LiteTextField(
            name: 'username',
            labelText: 'Username',
            validator: (value) {
              if (value.isEmpty) {
                return 'Username is required';
              }
              return null;
            },
          ),
          LiteTextField(
            name: 'password',
            labelText: 'Password',
            obscureText: true,
            validator: (value) {
              if (value.isEmpty) {
                return 'Password is required';
              }
              return null;
            },
          ),
          ElevatedButton(
            onPressed: () {
              LiteForm.of(context).submit();
            },
            child: Text('Submit'),
          ),
        ],
      ),
    );
  }
}

4. 表单字段

lite_forms 提供了多种表单字段组件，如 LiteTextField、LiteDropdownField 等。每个字段都有一个 name 属性，用于在表单提交时标识该字段。

LiteTextField

LiteTextField 是一个文本输入字段，支持验证和标签。

LiteTextField(
  name: 'email',
  labelText: 'Email',
  validator: (value) {
    if (value.isEmpty) {
      return 'Email is required';
    }
    if (!value.contains('@')) {
      return 'Invalid email format';
    }
    return null;
  },
);

LiteDropdownField

LiteDropdownField 是一个下拉选择字段。

LiteDropdownField(
  name: 'gender',
  labelText: 'Gender',
  items: ['Male', 'Female', 'Other'],
  validator: (value) {
    if (value == null || value.isEmpty) {
      return 'Gender is required';
    }
    return null;
  },
);

5. 表单验证

每个表单字段都可以通过 validator 属性进行验证。validator 是一个函数，接收字段的值并返回错误信息。如果返回 null，则表示验证通过。

6. 提交表单

使用 LiteForm.of(context).submit() 方法来提交表单。表单提交时，onSubmitted 回调会被调用，并传递表单字段的值。

ElevatedButton(
  onPressed: () {
    LiteForm.of(context).submit();
  },
  child: Text('Submit'),
);

7. 完整示例

以下是一个完整的示例，展示了如何使用 lite_forms 创建一个简单的登录表单。

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

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

class MyApp extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(title: Text('Lite Forms Example')),
        body: MyForm(),
      ),
    );
  }
}

class MyForm extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return LiteForm(
      onSubmitted: (Map<String, dynamic> values) {
        print("Form submitted with values: $values");
      },
      child: Padding(
        padding: const EdgeInsets.all(16.0),
        child: Column(
          children: [
            LiteTextField(
              name: 'username',
              labelText: 'Username',
              validator: (value) {
                if (value.isEmpty) {
                  return 'Username is required';
                }
                return null;
              },
            ),
            LiteTextField(
              name: 'password',
              labelText: 'Password',
              obscureText: true,
              validator: (value) {
                if (value.isEmpty) {
                  return 'Password is required';
                }
                return null;
              },
            ),
            SizedBox(height: 20),
            ElevatedButton(
              onPressed: () {
                LiteForm.of(context).submit();
              },
              child: Text('Submit'),
            ),
          ],
        ),
      ),
    );
  }
}