Flutter 动态表单构建与提交教程

在Flutter中构建动态表单并提交数据可以通过以下步骤实现：

1. 基本动态表单结构

import 'package:flutter/material.dart';

class DynamicFormPage extends StatefulWidget {
  @override
  _DynamicFormPageState createState() => _DynamicFormPageState();
}

class _DynamicFormPageState extends State<DynamicFormPage> {
  final _formKey = GlobalKey<FormState>();
  List<Map<String, dynamic>> formFields = [];
  Map<String, dynamic> formValues = {};

  @override
  void initState() {
    super.initState();
    // 模拟API获取动态表单字段
    _loadFormFields();
  }

  void _loadFormFields() {
    // 实际开发中这里应该是API请求
    setState(() {
      formFields = [
        {'type': 'text', 'label': '用户名', 'key': 'username', 'required': true},
        {'type': 'email', 'label': '邮箱', 'key': 'email', 'required': true},
        {'type': 'password', 'label': '密码', 'key': 'password', 'required': true},
        {'type': 'number', 'label': '年龄', 'key': 'age', 'required': false},
        {'type': 'dropdown', 'label': '性别', 'key': 'gender', 'options': ['男', '女'], 'required': false},
      ];
      
      // 初始化表单值
      formValues = {
        for (var field in formFields) field['key']: ''
      };
    });
  }
  
  // 构建不同类型的表单字段
  Widget _buildFormField(Map<String, dynamic> field) {
    switch(field['type']) {
      case 'text':
      case 'email':
      case 'password':
      case 'number':
        return TextFormField(
          decoration: InputDecoration(labelText: field['label']),
          obscureText: field['type'] == 'password',
          keyboardType: field['type'] == 'number' 
            ? TextInputType.number 
            : (field['type'] == 'email' 
              ? TextInputType.emailAddress 
              : TextInputType.text),
          validator: (value) {
            if (field['required'] && (value == null || value.isEmpty)) {
              return '${field['label']}不能为空';
            }
            return null;
          },
          onSaved: (value) => formValues[field['key']] = value,
        );
      case 'dropdown':
        return DropdownButtonFormField<String>(
          decoration: InputDecoration(labelText: field['label']),
          items: (field['options'] as List<String>)
              .map((option) => DropdownMenuItem(
                    value: option,
                    child: Text(option),
                  ))
              .toList(),
          onChanged: (value) => formValues[field['key']] = value,
          validator: (value) {
            if (field['required'] && value == null) {
              return '请选择${field['label']}';
            }
            return null;
          },
        );
      default:
        return Container();
    }
  }

  void _submitForm() {
    if (_formKey.currentState!.validate()) {
      _formKey.currentState!.save();
      // 这里可以处理表单提交逻辑
      print('表单数据: $formValues');
      // 实际开发中可能是API提交
      ScaffoldMessenger.of(context).showSnackBar(
        SnackBar(content: Text('表单提交成功'))
      );
    }
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('动态表单')),
      body: Padding(
        padding: EdgeInsets.all(16),
        child: Form(
          key: _formKey,
          child: Column(
            children: [
              ...formFields.map((field) => _buildFormField(field)).toList(),
              SizedBox(height: 20),
              ElevatedButton(
                onPressed: _submitForm,
                child: Text('提交'),
              ),
            ],
          ),
        ),
      ),
    );
  }
}

2. 进阶功能建议

1. 异步加载表单配置：从服务器获取表单字段配置
2. 更复杂的验证逻辑：如正则表达式验证
3. 动态添加/删除字段：根据用户输入动态调整表单
4. 表单缓存：保存用户未完成的数据
5. 多步骤表单：将长表单分为多个步骤

要使用这个动态表单，只需在应用中导航到这个页面即可。实际开发中，你应该根据后端API返回的字段配置来动态生成表单。