Flutter表单管理插件zk_form_g的使用

安装

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

dependencies:
  zk_form_g: ^1.2.1

示例

构建表单项

构建表单

完整示例代码

以下是完整的示例代码，展示了如何使用 zk_form_g 插件来创建一个简单的表单。

import 'package:flutter/material.dart';

// 导入必要的库
import './basic/form_page.dart'; // 基本表单页面
import 'application.dart'; // 应用程序配置
import 'dynamic/form_dynamic_page.dart'; // 动态表单页面

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

class MyApp extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      home: HomePage(),
    );
  }
}

class HomePage extends StatelessWidget {
  const HomePage({
    Key key,
  }) : super(key: key);

  [@override](/user/override)
  Widget build(BuildContext context) {
    Application.appContext = context; // 设置应用程序上下文

    return Scaffold(
      appBar: AppBar(
        title: Text("示例"), // 设置应用标题
      ),
      body: ListView( // 使用ListView展示选项
        children: [
          ListTile(
            title: Text("基本使用"), // 基本使用选项
            onTap: () {
              Navigator.of(context).push( // 导航到基本表单页面
                MaterialPageRoute(
                  builder: (context) => FormPage(),
                ),
              );
            },
          ),
          Divider(
            height: 0.5,
            thickness: 0.5,
          ),
          ListTile(
            title: Text("动态表单"), // 动态表单选项
            onTap: () {
              Navigator.of(context).push( // 导航到动态表单页面
                MaterialPageRoute(
                  builder: (context) => FormDynamicPage(),
                ),
              );
            },
          ),
          Divider(
            height: 0.5,
            thickness: 0.5,
          ),
        ],
      ),
    );
  }
}

说明

1. 导入必要的库：确保你导入了所有必要的库。
2. 定义主应用类 (MyApp)：这是应用的入口点，设置了 MaterialApp 并指定首页为 HomePage。
3. 定义首页类 (HomePage)：在 HomePage 中，通过 ListView 展示两个选项：“基本使用” 和 “动态表单”，点击后会导航到相应的页面。

基本表单页面 (FormPage)

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

class FormPage extends StatefulWidget {
  [@override](/user/override)
  _FormPageState createState() => _FormPageState();
}

class _FormPageState extends State<FormPage> {
  final _formKey = GlobalKey<FormState>();

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('基本表单'),
      ),
      body: Padding(
        padding: const EdgeInsets.all(16.0),
        child: Form(
          key: _formKey,
          child: Column(
            children: [
              TextFormField(
                decoration: InputDecoration(labelText: '姓名'),
                validator: (value) {
                  if (value == null || value.isEmpty) {
                    return '请输入姓名';
                  }
                  return null;
                },
              ),
              SizedBox(height: 16.0),
              TextFormField(
                decoration: InputDecoration(labelText: '邮箱'),
                validator: (value) {
                  if (value == null || value.isEmpty) {
                    return '请输入邮箱';
                  }
                  if (!RegExp(r'^[\w-\.]+@([\w-]+\.)+[\w-]{2,4}$').hasMatch(value)) {
                    return '请输入有效的邮箱地址';
                  }
                  return null;
                },
              ),
              SizedBox(height: 16.0),
              ElevatedButton(
                onPressed: () {
                  if (_formKey.currentState.validate()) {
                    // 表单验证通过，可以提交数据
                    print('表单提交成功');
                  }
                },
                child: Text('提交'),
              ),
            ],
          ),
        ),
      ),
    );
  }
}

动态表单页面 (FormDynamicPage)

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

class FormDynamicPage extends StatefulWidget {
  [@override](/user/override)
  _FormDynamicPageState createState() => _FormDynamicPageState();
}

class _FormDynamicPageState extends State<FormDynamicPage> {
  final _formKey = GlobalKey<FormState>();

  List<FormItem> formItems = [
    FormItem(
      label: '姓名',
      field: TextFormField(
        decoration: InputDecoration(labelText: '姓名'),
        validator: (value) {
          if (value == null || value.isEmpty) {
            return '请输入姓名';
          }
          return null;
        },
      ),
    ),
    FormItem(
      label: '邮箱',
      field: TextFormField(
        decoration: InputDecoration(labelText: '邮箱'),
        validator: (value) {
          if (value == null || value.isEmpty) {
            return '请输入邮箱';
          }
          if (!RegExp(r'^[\w-\.]+@([\w-]+\.)+[\w-]{2,4}$').hasMatch(value)) {
            return '请输入有效的邮箱地址';
          }
          return null;
        },
      ),
    ),
  ];

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('动态表单'),
      ),
      body: Padding(
        padding: const EdgeInsets.all(16.0),
        child: Form(
          key: _formKey,
          child: Column(
            children: formItems.map((item) => item.field).toList(),
          ),
        ),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: () {
          if (_formKey.currentState.validate()) {
            // 表单验证通过，可以提交数据
            print('表单提交成功');
          }
        },
        child: Icon(Icons.check),
      ),
    );
  }
}

class FormItem {
  final String label;
  final Widget field;

  FormItem({required this.label, required this.field});
}