Flutter中如何根据选中的DropdownMenuItem自动填充其他表单字段

1. 定义产品实体类 #

优先用类型安全的实体类存储后端返回的产品数据，避免直接操作Map导致的字段取值错误：

class Product {
  final String oid;
  final String name;
  final num unitPrice;
  final int quantity;
  // 其他扩展字段按需添加

  Product({
    required this.oid,
    required this.name,
    required this.unitPrice,
    required this.quantity,
  });

  // 适配后端JSON结构的fromJson方法
  factory Product.fromJson(Map<String, dynamic> json) {
    return Product(
      oid: json['oid'] as String,
      name: json['name'] as String,
      unitPrice: json['unitPrice'] as num,
      quantity: json['quantity'] as int,
    );
  }
}

2. 声明所需状态与控制器 #

不要只存储选中的oid，直接存储完整的选中产品对象，同时为两个填充字段声明文本控制器：

// 下拉数据源，接口请求成功后赋值
List<Product> productList = [];
// 选中的产品对象
Product? selectedProduct;
// 数量、单价输入框控制器
final quantityController = TextEditingController();
final unitPriceController = TextEditingController();

3. 修改下拉组件配置 #

将下拉组件的泛型指定为Product，在选中回调中同步给输入框赋值：

DropdownButtonFormField<Product>(
  value: selectedProduct,
  decoration: const InputDecoration(labelText: '选择产品'),
  items: productList.map((product) {
    return DropdownMenuItem<Product>(
      value: product,
      child: Text(product.name),
    );
  }).toList(),
  onChanged: (value) {
    if (value != null) {
      setState(() {
        selectedProduct = value;
        // 选中后自动填充对应字段
        quantityController.text = value.quantity.toString();
        unitPriceController.text = value.unitPrice.toString();
      });
    }
  },
  validator: (value) => value == null ? '请选择产品' : null,
)

4. 绑定控制器到对应输入框 #

// 数量输入框
TextFormField(
  controller: quantityController,
  decoration: const InputDecoration(labelText: '数量'),
  keyboardType: TextInputType.number,
),
// 单价输入框
TextFormField(
  controller: unitPriceController,
  decoration: const InputDecoration(labelText: '单价'),
  keyboardType: const TextInputType.numberWithOptions(decimal: true),
)

• 后端接口返回数据解析时，需要完整解析所有所需字段到Product实体，不要仅提取下拉展示需要的name和oid
• 如果允许用户手动修改数量、单价，不要在build周期中重复给控制器赋值，避免覆盖用户手动输入的内容，仅在下拉选中的回调中赋值即可
• 表单重置时需要同步清空selectedProduct和两个控制器的文本内容

内容的提问来源于stack exchange，提问作者jonah rimsy