在 Flutter 中实现表单联动动态效果，可以通过 StatefulWidget 和 setState 来动态更新数据。例如，有两个下拉框，第一个选择省份，第二个显示对应的市。

1. 定义数据源：创建省市区的映射数据。
2. 使用 DropdownButton 创建两个下拉框。
3. 在第一个下拉框 onChanged 事件中，根据选择的省份更新第二个下拉框的数据源。
4. 使用 setState 刷新 UI。

代码示例：

class FormLinkagePage extends StatefulWidget {
  @override
  _FormLinkagePageState createState() => _FormLinkagePageState();
}

class _FormLinkagePageState extends State<FormLinkagePage> {
  List<String> provinces = ['北京', '上海'];
  String selectedProvince;
  List<String> cities;

  @override
  void initState() {
    super.initState();
    cities = provinceCity[selectedProvince ?? '北京'];
  }

  Map<String, List<String>> provinceCity = {
    '北京': ['朝阳区', '海淀区'],
    '上海': ['浦东新区', '静安区']
  };

  @override
  Widget build(BuildContext context) {
    return Column(
      children: [
        DropdownButton<String>(
          value: selectedProvince,
          items: provinces.map((String province) {
            return DropdownMenuItem<String>(
              value: province,
              child: Text(province),
            );
          }).toList(),
          onChanged: (String newValue) {
            setState(() {
              selectedProvince = newValue;
              cities = provinceCity[newValue];
            });
          },
        ),
        DropdownButton<String>(
          value: null,
          items: cities?.map((String city) {
            return DropdownMenuItem<String>(
              value: city,
              child: Text(city),
            );
          }).toList(),
        )
      ],
    );
  }
}

这样就能实现动态联动的效果了。

Flutter 表单联动动态实现

在Flutter中实现表单联动通常使用Form和FormField组件，结合状态管理来处理字段间的依赖关系。

基本实现方法

import 'package:flutter/material.dart';

class DynamicForm extends StatefulWidget {
  @override
  _DynamicFormState createState() => _DynamicFormState();
}

class _DynamicFormState extends State<DynamicForm> {
  final _formKey = GlobalKey<FormState>();
  String? selectedCountry;
  String? selectedCity;
  List<String> cities = [];

  // 模拟国家-城市数据
  final Map<String, List<String>> countryCities = {
    '中国': ['北京', '上海', '广州', '深圳'],
    '美国': ['纽约', '洛杉矶', '芝加哥'],
    '日本': ['东京', '大阪', '京都'],
  };

  @override
  Widget build(BuildContext context) {
    return Form(
      key: _formKey,
      child: Column(
        children: [
          DropdownButtonFormField<String>(
            value: selectedCountry,
            decoration: InputDecoration(labelText: '选择国家'),
            items: countryCities.keys.map((country) {
              return DropdownMenuItem(
                value: country,
                child: Text(country),
              );
            }).toList(),
            onChanged: (value) {
              setState(() {
                selectedCountry = value;
                selectedCity = null; // 重置城市选择
                cities = countryCities[value] ?? [];
              });
            },
            validator: (value) => value == null ? '请选择国家' : null,
          ),
          const SizedBox(height: 16),
          DropdownButtonFormField<String>(
            value: selectedCity,
            decoration: InputDecoration(labelText: '选择城市'),
            items: cities.map((city) {
              return DropdownMenuItem(
                value: city,
                child: Text(city),
              );
            }).toList(),
            onChanged: (value) {
              setState(() {
                selectedCity = value;
              });
            },
            validator: (value) => value == null && cities.isNotEmpty 
                ? '请选择城市' 
                : null,
          ),
        ],
      ),
    );
  }
}

更复杂的联动实现

对于更复杂的表单联动，可以考虑：

1. 使用Provider或Riverpod进行状态管理
2. 动态生成表单字段 - 根据用户选择显示/隐藏字段
3. 条件校验 - 某些字段只在特定条件下才需要验证

例如动态显示字段的实现：

// 在表单中添加
if (selectedCountry == '中国') {
  TextFormField(
    decoration: InputDecoration(labelText: '身份证号'),
    validator: (value) => value?.isEmpty ?? true ? '请输入身份证号' : null,
  ),
}

最佳实践

1. 将表单逻辑与UI分离
2. 使用控制器管理表单状态
3. 考虑表单验证的复杂性
4. 为动态字段提供流畅的过渡动画

通过合理使用Flutter的状态管理和表单组件，可以构建出复杂但用户体验良好的联动表单。