Flutter注册表单中如何在TextFormField添加性别可选选项列表？

你现有注册表单效果如下：

以下3种可直接落地的实现方案，均可和你现有使用TextFormField的表单逻辑无缝集成：

方案1：只读TextFormField + 底部选择弹窗 #

该方案和现有表单交互风格统一，不会破坏原有表单排版一致性，用户点击性别输入框时弹出选项选择：

• 把性别对应的TextFormField设置为readOnly: true，避免触发键盘弹出
• 给TextFormField添加onTap回调，触发showModalBottomSheet显示选项弹窗
• 弹窗内通过ListTile承载三个性别选项，点击后将选中值回填到输入框控制器即可

关键代码示例：

final TextEditingController genderController = TextEditingController();

// 性别输入框组件
TextFormField(
  controller: genderController,
  readOnly: true,
  decoration: const InputDecoration(
    labelText: '性别',
    suffixIcon: Icon(Icons.arrow_drop_down),
  ),
  onTap: () {
    showModalBottomSheet(
      context: context,
      builder: (context) => Column(
        mainAxisSize: MainAxisSize.min,
        children: [
          ListTile(
            title: const Text('Male'),
            onTap: () {
              genderController.text = 'Male';
              Navigator.pop(context);
            },
          ),
          ListTile(
            title: const Text('Female'),
            onTap: () {
              genderController.text = 'Female';
              Navigator.pop(context);
            },
          ),
          ListTile(
            title: const Text('Other'),
            onTap: () {
              genderController.text = 'Other';
              Navigator.pop(context);
            },
          ),
        ],
      ),
    );
  },
  // 可直接添加validator和现有表单验证逻辑打通
  validator: (value) => value == null || value.isEmpty ? '请选择性别' : null,
)

方案2：DropdownButtonFormField 下拉选择 #

该方案使用Flutter自带的表单选择组件，无需自行处理弹窗逻辑，原生支持表单验证规则：

String? selectedGender;

DropdownButtonFormField<String>(
  decoration: const InputDecoration(
    labelText: '性别',
    border: OutlineInputBorder(),
  ),
  value: selectedGender,
  items: const [
    DropdownMenuItem(value: 'Male', child: Text('Male')),
    DropdownMenuItem(value: 'Female', child: Text('Female')),
    DropdownMenuItem(value: 'Other', child: Text('Other')),
  ],
  onChanged: (value) {
    setState(() {
      selectedGender = value;
    });
  },
  validator: (value) => value == null ? '请选择性别' : null,
)

方案3：SegmentedButton 分段选择（Material 3） #

如果你的应用采用Material 3设计规范，使用分段选择按钮可以让用户无需跳转弹窗，直接在表单页完成选择，操作路径更短：

enum Gender { male, female, other }
Gender? selectedGender;

SegmentedButton<Gender>(
  segments: const [
    ButtonSegment(value: Gender.male, label: Text('Male')),
    ButtonSegment(value: Gender.female, label: Text('Female')),
    ButtonSegment(value: Gender.other, label: Text('Other')),
  ],
  selected: selectedGender != null ? {selectedGender!} : {},
  onSelectionChanged: (newSelection) {
    setState(() {
      selectedGender = newSelection.first;
    });
  },
)
// 可配合隐藏的TextFormField控制器将选中值接入表单提交逻辑，也可直接提交枚举对应的值

内容的提问来源于stack exchange，提问作者Mohamad Jabaly