Flutter表单管理插件app_forms的使用

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

Flutter表单管理插件app_forms的使用

该插件帮助你组织文件夹结构和表单逻辑。插件正在开发中

开始使用

安装插件

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

flutter pub add app_forms

使用插件

创建表单类以处理逻辑

创建一个表单类,继承自 AppForm,并在其中定义表单逻辑:

class LoginForm extends AppForm {
  /// 表单逻辑
}

声明表单字段

LoginForm 类中声明表单字段,并为其设置初始值和验证规则:

class LoginForm extends AppForm {
  final email = AppFormField<String>(
    name: 'email',
    initialValue: 'email@email.com',
    validations: FormBuilderValidators.compose([
      FormBuilderValidators.required(),
      FormBuilderValidators.email(),
    ]),
    onChange: (field) {
      print('email 状态改变 ${field?.value}');
    },
    onValid: (field) {
      print('email 验证通过 ${field?.value}');
    },
  );

  final password = AppFormField<String>(
    name: 'password',
    initialValue: 'test',
  );

  LoginForm() {
    setFields([email, password]);
  }
}

main.dart 中注入表单

在应用程序启动时,将表单注入到 AppForms 中:

import 'package:app_forms/app_forms.dart';
import 'package:your_project/forms/login_form.dart';
import 'package:your_project/login_page.dart';
import 'package:flutter/material.dart';

void main() {
  AppForms.injectForms([LoginForm()]);
  runApp(const MyApp());
}

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

  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        colorScheme: ColorScheme.fromSeed(seedColor: Colors.deepPurple),
        useMaterial3: true,
      ),
      home: const LoginPage(),
    );
  }
}

创建用户视图 login_page.dart

login_page.dart 中使用 AppFormBuilderAppFormListener 来构建表单界面:

import 'package:flutter/material.dart';
import 'package:app_forms/app_forms.dart';
import 'package:your_project/forms/login_form.dart';

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

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('登录页面'),
      ),
      body: Padding(
        padding: const EdgeInsets.all(8.0),
        child: Column(
          children: [
            AppFormBuilder<LoginForm>(
              builder: (loginForm) {
                return Column(
                  children: [
                    const SizedBox(
                      height: 30,
                    ),
                    FormBuilderTextField(
                      name: loginForm.email.name,
                      validator: loginForm.email.validations,
                      decoration: const InputDecoration(
                        border: OutlineInputBorder(),
                        label: Text('邮箱'),
                      ),
                    ),
                    const SizedBox(
                      height: 20,
                    ),
                    FormBuilderTextField(
                      name: loginForm.password.name,
                      validator: loginForm.password.validations,
                      obscureText: true,
                      decoration: const InputDecoration(
                        border: OutlineInputBorder(),
                        label: Text('密码'),
                      ),
                    ),
                    const SizedBox(
                      height: 30,
                    ),
                  ],
                );
              },
            ),
            AppFormListener<LoginForm>(
              builder: (form) {
                return ElevatedButton(
                    onPressed: form.progressing
                        ? null
                        : () {
                            form.submit();
                          },
                    child: Text('提交 ${form.email.value}'));
              },
            ),
          ],
        ),
      ),
    );
  }
}

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

1 回复

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


当然,以下是一个关于如何在Flutter项目中使用app_forms插件来管理表单的示例代码。请注意,app_forms并非一个广泛知名的官方或主流Flutter插件,因此我假设你提到的app_forms是一个自定义的或第三方插件,用于表单管理。由于具体实现细节可能有所不同,以下代码示例将基于假设的插件功能进行编写。

首先,确保你已经在pubspec.yaml文件中添加了app_forms插件的依赖项(如果它是一个公开可用的插件):

dependencies:
  flutter:
    sdk: flutter
  app_forms: ^x.y.z  # 替换为实际的版本号

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

接下来,让我们编写一个简单的Flutter应用,展示如何使用app_forms插件来管理表单。以下是一个假设的app_forms插件提供的功能,用于创建和管理表单:

import 'package:flutter/material.dart';
import 'package:app_forms/app_forms.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>();
  late FormModel formModel; // 假设FormModel是app_forms插件提供的一个类

  @override
  void initState() {
    super.initState();
    // 初始化表单模型
    formModel = FormModel(
      fields: [
        FormFieldModel(
          name: 'name',
          label: 'Name',
          validator: (value) {
            if (value == null || value.isEmpty) {
              return 'Name is required';
            }
            return null;
          },
        ),
        FormFieldModel(
          name: 'email',
          label: 'Email',
          validator: (value) {
            if (!value!.contains('@')) {
              return 'Invalid email address';
            }
            return null;
          },
        ),
        // 可以添加更多字段...
      ],
    );
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Form Management with app_forms'),
      ),
      body: Padding(
        padding: const EdgeInsets.all(16.0),
        child: Form(
          key: _formKey,
          child: Column(
            children: [
              // 使用app_forms插件提供的组件来渲染表单字段
              // 假设FormFieldWidget是插件提供的一个组件
              FormFieldWidget(formModel: formModel, fieldName: 'name'),
              FormFieldWidget(formModel: formModel, fieldName: 'email'),
              // 可以添加更多字段的渲染组件...
              SizedBox(height: 20),
              ElevatedButton(
                onPressed: () {
                  if (_formKey.currentState!.validate()) {
                    // 收集表单数据
                    Map<String, String> formData = {};
                    formModel.fields.forEach((field) {
                      formData[field.name] = field.value.toString();
                    });
                    // 处理表单数据,例如提交到服务器
                    print('Form Data: $formData');
                  }
                },
                child: Text('Submit'),
              ),
            ],
          ),
        ),
      ),
    );
  }
}

// 假设这些是app_forms插件提供的类定义(实际使用时,请参考插件的文档)
class FormModel {
  List<FormFieldModel> fields;

  FormModel({required this.fields});
}

class FormFieldModel {
  String name;
  String label;
  String? value;
  FormFieldValidator? validator;

  FormFieldModel({
    required this.name,
    required this.label,
    this.value,
    this.validator,
  });
}

typedef FormFieldValidator = String? Function(String? value);

// 假设FormFieldWidget是插件提供的一个组件(实际使用时,请参考插件的文档)
class FormFieldWidget extends StatefulWidget {
  final FormModel formModel;
  final String fieldName;

  FormFieldWidget({required this.formModel, required this.fieldName});

  @override
  _FormFieldWidgetState createState() => _FormFieldWidgetState();
}

class _FormFieldWidgetState extends State<FormFieldWidget> {
  late TextEditingController _controller;

  @override
  void initState() {
    super.initState();
    _controller = TextEditingController(text: widget.formModel.fields.firstWhere((field) => field.name == widget.fieldName).value ?? '');
    _controller.addListener(() {
      widget.formModel.fields.firstWhere((field) => field.name == widget.fieldName).value = _controller.text;
    });
  }

  @override
  Widget build(BuildContext context) {
    var field = widget.formModel.fields.firstWhere((field) => field.name == widget.fieldName);
    return TextFormField(
      controller: _controller,
      labelText: field.label,
      validator: field.validator,
    );
  }

  @override
  void dispose() {
    _controller.dispose();
    super.dispose();
  }
}

请注意,上述代码中的FormModelFormFieldModelFormFieldValidatorFormFieldWidget是基于假设的app_forms插件功能而创建的类。在实际使用中,你应该参考app_forms插件的官方文档来了解如何正确初始化表单模型、字段以及渲染组件。

如果app_forms插件提供了特定的API或组件来管理表单,你应该使用那些API或组件,而不是上面假设的类和方法。希望这个示例能帮助你理解如何在Flutter项目中使用表单管理插件。

回到顶部