Flutter中如何从DropdownButtonFormField调用新增成员表单

你的问题核心是错误地把Widget创建逻辑放在了onChanged回调里——onChanged的作用是响应下拉选项的选中事件，不是用来渲染新页面的，直接返回Hero组件根本不会触发页面跳转，反而会把"Add New Contact"赋值给mainContact，这就是字段被填充的原因。

下面是具体的修复步骤：

1. 完善下拉选项列表 #

先确保"新增"选项被正确添加到下拉列表末尾：

DropdownButtonFormField(
  // ...其他属性
  items: [
    // 原有成员选项
    ...members.map((member) => DropdownMenuItem<String>(
          value: member,
          child: Text(member),
        )).toList(),
    // 添加"新增"选项
    const DropdownMenuItem<String>(
      value: 'Add New Contact',
      child: Text('Add New Contact'),
    ),
  ],
  // ...其他逻辑
)

2. 修正onChanged的跳转逻辑 #

用Navigator.push来跳转页面，而不是直接创建Widget，同时等待MemberForm返回的新成员数据：

onChanged: (member) async {
  if (member == 'Add New Contact') {
    // 跳转到注册表单，等待返回新成员名称
    final newMember = await Navigator.push(
      context,
      MaterialPageRoute(
        builder: (context) => const Hero(tag: 'Hero-Member', child: MemberForm()),
      ),
    );
    // 如果返回了有效数据，更新成员列表并自动选中新成员
    if (newMember != null && newMember is String) {
      setState(() {
        members.add(newMember);
        mainContact = newMember;
      });
    }
  } else {
    // 正常选中已有成员
    setState(() => mainContact = member);
  }
},

3. 让MemberForm返回数据 #

在MemberForm的提交按钮逻辑里，用Navigator.pop把新成员数据返回给原页面：

// 示例：MemberForm中的提交按钮
ElevatedButton(
  onPressed: () {
    // 假设_newMemberController是输入框的控制器
    final newMemberName = _newMemberController.text.trim();
    if (newMemberName.isNotEmpty) {
      // 返回新成员名称
      Navigator.pop(context, newMemberName);
    }
  },
  child: const Text('提交'),
)

补充说明 #

Hero组件的作用是实现页面跳转时的过渡动画，需要在原页面和MemberForm页面都放置带有相同tag的Hero包裹的组件，比如原页面给下拉框的装饰图标加Hero，MemberForm给输入框加Hero，这样跳转时才有动画效果——你之前直接在onChanged里返回Hero组件的用法完全错误。

内容的提问来源于stack exchange，提问作者Barry Prentiss