Flutter中如何基于DropdownButtonFormField选中项动态显示表单？

DropdownButtonFormField完全适合你的场景 #

这组件就是为表单内的下拉选择场景设计的，自带表单验证、与Form组件联动的能力，比普通DropdownButton更贴合你的需求，不用换组件，放心用。

代码修正+功能实现 #

先捋你现有代码里的几个小问题，改完再实现显示表单的逻辑：

• 你定义的列表items里，Item 2后面少了个逗号，会触发语法错误
• selectedItemBuilder和items里用了status变量，但你实际定义的列表是items，变量名不匹配
• selectedStatus得初始化，要么设成items[0]，要么设为null（允许用户初始不选择）

下面是完整可运行的代码，已经实现了「选中Item1显示详情表单」的功能：

import 'package:flutter/material.dart';

class MyFormScreen extends StatefulWidget {
  const MyFormScreen({super.key});

  @override
  State<MyFormScreen> createState() => _MyFormScreenState();
}

class _MyFormScreenState extends State<MyFormScreen> {
  // 修正列表的逗号问题
  final List<String> items = ['Item 1', 'Item 2', 'Item 3', 'Item 4'];
  String? selectedStatus; // 初始值设为null，用户未选择时显示hint

  // 用于Item1详情输入的控制器
  final TextEditingController _detailInputController = TextEditingController();

  @override
  void dispose() {
    // 页面销毁时释放控制器，避免内存泄漏
    _detailInputController.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('表单示例')),
      body: Padding(
        padding: const EdgeInsets.all(16.0),
        child: Column(
          children: [
            DropdownButtonFormField<String>(
              value: selectedStatus,
              hint: const Text('请选择一个选项'), // 用户未选择时显示的提示文本
              onChanged: (value) {
                setState(() {
                  selectedStatus = value;
                });
              },
              selectedItemBuilder: (context) => items.map((item) {
                return DropdownMenuItem(
                  value: item,
                  child: Text(
                    item,
                    style: const TextStyle(
                      color: Color(0xFF0E0E0E),
                      fontSize: 14,
                      fontWeight: FontWeight.w500,
                    ),
                  ),
                );
              }).toList(),
              decoration: const InputDecoration(
                border: InputBorder.none,
                filled: true,
                fillColor: Colors.white,
                contentPadding: EdgeInsets.symmetric(horizontal: 16), // 加内边距让文本不贴边
              ),
              items: items.map((item) {
                return DropdownMenuItem<String>(
                  value: item,
                  child: Text(
                    item,
                    style: const TextStyle(
                      color: Colors.black,
                      fontSize: 14,
                      fontWeight: FontWeight.w500,
                    ),
                  ),
                );
              }).toList(),
            ),
            // 核心逻辑：选中Item1时显示详情表单
            if (selectedStatus == 'Item 1')
              Padding(
                padding: const EdgeInsets.only(top: 16.0),
                child: TextFormField(
                  controller: _detailInputController,
                  decoration: const InputDecoration(
                    labelText: '填写Item1详情',
                    border: OutlineInputBorder(),
                    filled: true,
                    fillColor: Colors.white,
                  ),
                  // 如果嵌套在Form组件里，可添加验证逻辑
                  validator: (value) {
                    if (value == null || value.isEmpty) {
                      return '请填写详情内容';
                    }
                    return null;
                  },
                ),
              ),
            // 提交按钮示例，可根据需求调整
            Padding(
              padding: const EdgeInsets.only(top: 24),
              child: ElevatedButton(
                onPressed: () {
                  // 处理表单提交
                  if (selectedStatus == 'Item 1' && _detailInputController.text.isEmpty) {
                    ScaffoldMessenger.of(context).showSnackBar(
                      const SnackBar(content: Text('请填写Item1的详情哦')),
                    );
                    return;
                  }
                  // 打印选中的选项和详情，实际项目替换为接口提交逻辑
                  print('选中选项：$selectedStatus');
                  if (selectedStatus == 'Item 1') {
                    print('详情内容：${_detailInputController.text}');
                  }
                },
                child: const Text('提交表单'),
              ),
            )
          ],
        ),
      ),
    );
  }
}

几个关键说明 #

• 条件渲染：用if (selectedStatus == 'Item 1')直接控制详情表单的显示/隐藏，这是Flutter里最直观的写法
• 表单联动：如果页面嵌套在Form组件中，可以给两个表单组件都添加validator，用FormState做整体校验
• 内存管理：页面销毁时记得释放TextEditingController，避免内存泄漏

内容的提问来源于stack exchange，提问作者Kennedy Owusu