如何通过DropDown下拉菜单控制表单字段的显隐状态？

核心实现逻辑是通过状态变量监听下拉选择结果，再根据条件判断控制目标表单字段的渲染/可见状态，具体实现如下： #

1. 前提说明 #

你提供的是Flutter框架代码，默认基于StatefulWidget实现页面，需要借助setState更新状态触发UI重绘。

2. 完整修改后代码 #

// 首先在State类中定义存储下拉选中值的状态变量
String? patientConsent;

// 布局部分代码
Expanded(
  child: DropDownWidget(
    list: ["Yes","No"],
    data: patientConsent,
    hint: getTranslated(context, "select"),
    heading: getTranslated(context, "patient_consent"),
    // 新增选择回调，选项切换时更新状态
    onChanged: (value){
      setState((){
        patientConsent = value;
      });
    },
  ),
),

// 用Visibility组件包裹目标表单字段，根据下拉值控制可见性
Visibility(
  // 示例规则：下拉选择"Yes"时显示样本ID字段，选择"No"时隐藏
  visible: patientConsent == "Yes",
  // 可选配置：隐藏时是否保留组件占位空间，不需要可设为false
  maintainSize: false,
  child: CustomFromField(
    heading: getTranslated(context, "sample_id"),
  ),
)

3. 简化写法 #

如果不需要保留隐藏字段的状态，也可以直接用条件判断动态渲染字段：

Expanded(
  child: DropDownWidget(
    list: ["Yes","No"],
    data: patientConsent,
    hint: getTranslated(context, "select"),
    heading: getTranslated(context, "patient_consent"),
    onChanged: (value){
      setState((){
        patientConsent = value;
      });
    },
  ),
),

// 只有下拉选"Yes"时才渲染样本ID字段
if(patientConsent == "Yes")
  CustomFromField(
    heading: getTranslated(context, "sample_id"),
  ),

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