Flutter表单管理插件qu_form的使用

Flutter表单管理插件qu_form的使用

安装

在pubspec.yaml文件中添加以下依赖：

dependencies:
  qu_form

然后运行以下命令以安装依赖：

flutter pub get

API

QUForm

参数

参数名 类型 说明
key GlobalKey 通过key操作form
mainColor Color? 支持修改主题色，默认主题色为Color(0xff598FE8)

示例代码

import 'package:qu_form/qu_form.dart';

QUForm(
    key: _formKey,
    // 支持修改主题色
    mainColor: Color(0xff598FE8)
)

方法

方法名 参数类型 说明
void setFormSetting List<QUDynamicFormSettingModel> 设置表单配置
void setFormValue Map<String, Map<String, dynamic>> 设置表单内容
bool validate 无 验证表单
Map save 无 获取表单内容

示例代码

// 设置表单
_formKey.currentState.setFormSetting(formSetting);
// 设置表单内容
_formKey.currentState.setFormValue(formValue);
// 验证表单 返回bool
_formKey.currentState.validate();
// 获取表单内容
_formKey.currentState.save();

示例Demo

以下是一个完整的示例代码，展示了如何使用qu_form插件来管理表单。

示例代码

import 'package:example/json.dart';
import 'package:flutter/material.dart';
import 'package:flutter_localizations/flutter_localizations.dart';
import 'package:qu_form/Model/QUDynamicFormSettingModel.dart';
import 'package:qu_form/QUForm/Components/QUButton.dart';
import 'package:qu_form/qu_form.dart';

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

class MyApp extends StatefulWidget {
  MyApp({Key? key}) : super(key: key);

  [@override](/user/override)
  _MyAppState createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
  final GlobalKey<QUFormState> _formKey = GlobalKey();
  bool _isMount = true;

  [@override](/user/override)
  void initState() {
    super.initState();
    _setForm();
    _setFormValue();
  }

  [@override](/user/override)
  void setState(fn) {
    if (_isMount) {
      super.setState(fn);
    }
  }

  [@override](/user/override)
  void dispose() {
    super.dispose();
    _isMount = false;
  }

  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'form example',
      locale: Locale('zh', 'CN'),
      // 国际化
      localizationsDelegates: [
        GlobalMaterialLocalizations.delegate,
        GlobalWidgetsLocalizations.delegate,
        GlobalCupertinoLocalizations.delegate,
      ],
      supportedLocales: [
        const Locale('en', 'US'), // 美国英语
        const Locale('zh', 'CN'), // 中文简体
        //其它Locales
      ],
      home: Scaffold(
        resizeToAvoidBottomInset: true,
        body: Container(
          padding: EdgeInsets.all(20),
          child: ListView(
            children: [
              QUButton(text: '提交', onPressed: _onPressed),
              QUForm(
                key: _formKey,
                mainColor: Color(0xff598FE8),
              ),
            ],
          ),
        ),
      ),
    );
  }

  // 模拟接口返回 设置表单
  _setForm() {
    Future.delayed(Duration(milliseconds: 1000), () {
      try {
        final List<QUDynamicFormSettingModel> formSetting =
            (data['dynamicFormSetting'] as List)
                .map((item) => QUDynamicFormSettingModel.fromJson(item))
                .toList();
        _formKey.currentState!.setFormSetting(formSetting);
      } catch (e) {
        print(e);
      }
    });
  }

  // 模拟接口设置表单数据
  _setFormValue() {
    Future.delayed(Duration(milliseconds: 2000), () {
      try {
        _formKey.currentState!.setFormValue(
            data['dynamicFormValue'] as Map<String, Map<String, dynamic>>);
      } catch (e) {
        print(e);
      }
    });
  }

  _onPressed() {
    final form = _formKey.currentState!;
    // 验证表单
    final isValidate = form.validate();
    if (isValidate) {
      final formValue = form.save();
      print(formValue);
    }
  }
}

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

1 回复

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


qu_form 是一个用于 Flutter 应用的表单管理插件，它可以帮助开发者更轻松地处理表单的验证、状态管理和数据提交。qu_form 提供了一种声明式的方式来定义表单字段，并自动处理表单的验证和状态管理。

以下是使用 qu_form 插件的基本步骤和示例：

1. 添加依赖

首先，在 pubspec.yaml 文件中添加 qu_form 插件的依赖：

dependencies:
  flutter:
    sdk: flutter
  qu_form: ^0.1.0  # 请检查最新版本

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

2. 导入包

在需要使用 qu_form 的 Dart 文件中导入包：

import 'package:qu_form/qu_form.dart';

3. 创建表单

使用 QuForm 来创建一个表单，并定义表单字段。每个字段可以使用 QuField 来定义，并指定验证规则。

class MyForm extends StatelessWidget {
  final _formKey = GlobalKey<QuFormState>();

  @override
  Widget build(BuildContext context) {
    return QuForm(
      key: _formKey,
      child: Column(
        children: [
          QuField<String>(
            name: 'username',
            initialValue: '',
            validators: [
              Validators.required('Username is required'),
              Validators.minLength(3, 'Username must be at least 3 characters'),
            ],
            builder: (field) {
              return TextFormField(
                decoration: InputDecoration(
                  labelText: 'Username',
                  errorText: field.errorText,
                ),
                onChanged: field.didChange,
              );
            },
          ),
          QuField<String>(
            name: 'password',
            initialValue: '',
            validators: [
              Validators.required('Password is required'),
              Validators.minLength(6, 'Password must be at least 6 characters'),
            ],
            builder: (field) {
              return TextFormField(
                obscureText: true,
                decoration: InputDecoration(
                  labelText: 'Password',
                  errorText: field.errorText,
                ),
                onChanged: field.didChange,
              );
            },
          ),
          SizedBox(height: 20),
          ElevatedButton(
            onPressed: () {
              if (_formKey.currentState!.validate()) {
                final formData = _formKey.currentState!.value;
                print('Form data: $formData');
              }
            },
            child: Text('Submit'),
          ),
        ],
      ),
    );
  }
}

4. 处理表单提交

在表单提交按钮的 onPressed 回调中，使用 _formKey.currentState!.validate() 来验证表单字段。如果验证通过，可以使用 _formKey.currentState!.value 来获取表单数据。

5. 运行应用

在 main.dart 中运行应用：

void main() {
  runApp(MaterialApp(
    home: Scaffold(
      appBar: AppBar(title: Text('QuForm Example')),
      body: MyForm(),
    ),
  ));
}
回到顶部