Flutter表单构建插件glade_forms的使用

Glade Forms 提供了一种统一的方式定义可重用的表单输入，并支持流畅的API来定义输入验证器和翻译功能。以下是如何在Flutter应用中使用 glade_forms 插件的详细步骤和示例代码。

🚀 开始使用

首先，您需要在您的项目中添加 glade_forms 依赖项。在 pubspec.yaml 文件中添加如下内容：

dependencies:
  flutter:
    sdk: flutter
  glade_forms: ^最新版本号

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

创建模型类

创建一个持有 GladeInputs 的模型类。例如：

class _Model extends GladeModel {
  late GladeInput<String> name;
  late GladeInput<int> age;
  late GladeInput<String> email;

  @override
  List<GladeInput<Object?>> get inputs => [name, age, email];

  @override
  void initialize() {
    name = GladeInput.stringInput(inputKey: 'name');
    age = GladeInput.intInput(value: 0, useTextEditingController: true, inputKey: 'age');
    email = GladeInput.stringInput(
        validator: (validator) => (validator..isEmail()).build(),
        inputKey: 'email'
    );

    super.initialize();
  }
}

使用 GladeFormBuilder

接下来，使用 GladeFormBuilder 将模型连接到标准的Flutter表单及其输入组件：

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

class Example extends StatelessWidget {
  const Example({super.key});

  @override
  Widget build(BuildContext context) {
    return GladeFormBuilder.create(
      create: (context) => _Model(),
      builder: (context, model, _) => Padding(
        padding: const EdgeInsets.all(32),
        child: Form(
          autovalidateMode: AutovalidateMode.onUserInteraction,
          child: Column(
            children: [
              TextFormField(
                controller: model.name.controller,
                validator: model.name.textFormFieldInputValidator,
                decoration: const InputDecoration(labelText: 'Name'),
              ),
              TextFormField(
                controller: model.age.controller,
                validator: model.age.textFormFieldInputValidator,
                decoration: const InputDecoration(labelText: 'Age'),
              ),
              TextFormField(
                controller: model.email.controller,
                validator: model.email.textFormFieldInputValidator,
                decoration: const InputDecoration(labelText: 'Email'),
              ),
              const SizedBox(height: 10),
              ElevatedButton(
                onPressed: model.isValid ? () {} : null,
                child: const Text('Save'),
              ),
            ],
          ),
        ),
      ),
    );
  }
}

✨ 特性

GladeInput

每个表单输入由 GladeInput<T> 实例表示，其中 T 是输入持有的值类型。您可以为每个输入定义验证器、翻译错误消息等功能。

验证

通过 ValidatorFactory 方法如 notNull()、satisfy() 等部分定义验证规则。例如，定义一个整数值必须大于或等于18的验证规则：

ageInput = GladeInput.create(
  validator: (v) => (v
        ..notNull()
        ..satisfy(
          (value) => value >= 18,
          devError: (_, __) => 'Value must be greater or equal to 18',
          key: _ErrorKeys.ageRestriction,
        ))
      .build(),
  value: 0,
  valueConverter: GladeTypeConverters.intConverter,
);

翻译

每个验证错误可以被翻译。提供 translateError 函数以根据需要翻译错误信息。例如：

translateError: (error, key, devMessage, {required dependencies}) {
  if (key == _ErrorKeys.ageRestriction) return LocaleKeys.ageRestriction_under18.tr();

  if (error.isConversionError) return LocaleKeys.ageRestriction_ageFormat.tr();

  return devMessage;
}

示例 Demo

完整示例代码如下：

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

// 模型类
class _Model extends GladeModel {
  late GladeInput<String> name;
  late GladeInput<int> age;
  late GladeInput<String> email;

  @override
  List<GladeInput<Object?>> get inputs => [name, age, email];

  @override
  void initialize() {
    name = GladeInput.stringInput(inputKey: 'name');
    age = GladeInput.intInput(value: 0, useTextEditingController: true, inputKey: 'age');
    email = GladeInput.stringInput(
        validator: (validator) => (validator..isEmail()).build(),
        inputKey: 'email'
    );

    super.initialize();
  }
}

// 主应用类
class ExampleApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(title: Text('Glade Forms Example')),
        body: Example(),
      ),
    );
  }
}

// 表单页面
class Example extends StatelessWidget {
  const Example({super.key});

  @override
  Widget build(BuildContext context) {
    return GladeFormBuilder.create(
      create: (context) => _Model(),
      builder: (context, model, _) => Padding(
        padding: const EdgeInsets.all(32),
        child: Form(
          autovalidateMode: AutovalidateMode.onUserInteraction,
          child: Column(
            children: [
              TextFormField(
                controller: model.name.controller,
                validator: model.name.textFormFieldInputValidator,
                decoration: const InputDecoration(labelText: 'Name'),
              ),
              TextFormField(
                controller: model.age.controller,
                validator: model.age.textFormFieldInputValidator,
                decoration: const InputDecoration(labelText: 'Age'),
              ),
              TextFormField(
                controller: model.email.controller,
                validator: model.email.textFormFieldInputValidator,
                decoration: const InputDecoration(labelText: 'Email'),
              ),
              const SizedBox(height: 10),
              ElevatedButton(
                onPressed: model.isValid ? () {} : null,
                child: const Text('Save'),
              ),
            ],
          ),
        ),
      ),
    );
  }
}

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

以上是一个完整的 Flutter 应用程序示例，展示了如何使用 glade_forms 插件来构建和验证表单。希望这对您有所帮助！