Flutter如何实现选中下拉列表项后显示下方TextField组件

核心实现逻辑是通过状态变量记录下拉选中值，用条件渲染控制对应输入框的显隐，你之前的代码仅完成了下拉选值的状态更新，缺少条件渲染逻辑，也没有把下拉组件和输入框放在垂直布局容器中，才会出现输入框不显示的问题。

具体实现步骤 #

• 定义可空的状态变量存储下拉选中值，初始值设为null，匹配下拉框默认hint展示状态
• 把下拉组件和后续要显示的输入框放在Column这类垂直布局组件中，避免横向布局导致的组件挤压、溢出问题
• 在下拉组件下方添加条件判断，只有选中对应选项时才渲染匹配的TextField组件
• 给TextField绑定独立的TextEditingController，方便后续获取输入内容，页面销毁时记得释放控制器避免内存泄漏

完整适配你原有代码的示例 #

// 以下变量定义在对应State类中
String? selectedHealthStatus;
final healthItems = ['Healthy', 'Unhealthy'];
// 输入框控制器，按需为不同输入框单独定义
final TextEditingController unHealthyDescController = TextEditingController();

// 保留你原来写的下拉菜单项构建逻辑
DropdownMenuItem<String> buildMenuItem(String item) => DropdownMenuItem(
      value: item,
      child: Text(
        item,
        style: const TextStyle(
          fontSize: 16,
          fontFamily: "Ubuntu",
          color: Colors.black54,
        ),
      ),
    );

// 布局部分
Column(
  crossAxisAlignment: CrossAxisAlignment.center,
  mainAxisSize: MainAxisSize.min, // 避免Column占满全屏导致布局异常
  children: [
    // 保留你原来写的下拉选择容器代码，仅修改了绑定的value变量名
    Container(
      width: scrwidth * 0.8,
      height: scrheight / 14,
      padding: const EdgeInsets.symmetric(horizontal: 12, vertical: 4),
      decoration: BoxDecoration(
        borderRadius: BorderRadius.circular(10),
        border: Border.all(color: Colors.black54, width: 1),
      ),
      child: DropdownButtonHideUnderline(
        child: DropdownButton<String>(
          icon: const Icon(
            Icons.arrow_drop_down,
            color: Colors.black54,
          ),
          hint: const Text(
            "Health",
            style: TextStyle(
              fontFamily: "Ubuntu",
              fontWeight: FontWeight.bold,
            ),
          ),
          isExpanded: true,
          value: selectedHealthStatus,
          items: healthItems.map(buildMenuItem).toList(),
          onChanged: (value) => setState(() => selectedHealthStatus = value),
        ),
      ),
    ),
    // 下拉和输入框之间加间距
    const SizedBox(height: 16),
    // 条件渲染：选中Unhealthy时显示异常描述输入框
    if (selectedHealthStatus == 'Unhealthy')
      Container(
        width: scrwidth * 0.8,
        padding: const EdgeInsets.symmetric(horizontal: 12, vertical: 4),
        decoration: BoxDecoration(
          borderRadius: BorderRadius.circular(10),
          border: Border.all(color: Colors.black54, width: 1),
        ),
        child: TextField(
          controller: unHealthyDescController,
          decoration: const InputDecoration(
            border: InputBorder.none, // 去掉输入框默认下划线，和你下拉的样式统一
            hintText: "请描述健康异常的具体情况",
            hintStyle: TextStyle(
              fontFamily: "Ubuntu",
              color: Colors.black38,
            ),
          ),
          style: const TextStyle(
            fontSize: 16,
            fontFamily: "Ubuntu",
            color: Colors.black54,
          ),
          maxLines: 3, // 按需设置输入框行数
        ),
      ),
    // 如果选中Healthy需要显示其他输入框，直接在这里追加if判断即可
    // 示例：if(selectedHealthStatus == 'Healthy') 健康状态对应的输入框组件
  ],
)

注意事项：

• 不要给DropdownButton的value参数提前赋值列表外的非法值，否则会抛出组件异常
• 输入框的样式完全可以复用你给下拉框写的Container装饰，保持UI风格统一
• 多个输入框的场景下，每个输入框要对应独立的TextEditingController，不要复用同一个控制器
• 页面销毁时在dispose生命周期里调用所有控制器的dispose()方法，避免内存泄漏

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