Flutter选中下拉框值后点击setUpFormTextField下拉框被重置如何解决？

问题根源 #

下拉框setUpDropDown的value属性被固定绑定为listOfReason[0]，每次输入框的onChanged触发setState时，当前页面组件会重新构建，下拉框会读取写死的默认值，导致已选值被覆盖。

解决步骤 #

• 首先在当前State类中定义变量存储下拉框的选中值：

// 放在State类的属性定义位置
ContactUsReason? selectedReason;

• 在initState中给变量赋值初始默认值：

@override
void initState() {
  super.initState();
  selectedReason = listOfReason[0];
}

• 修改setUpDropDown的value属性，绑定自定义的selectedReason变量：

value: selectedReason,

• 修改setUpDropDown的valueChanged回调，选中后同步更新selectedReason的值：

valueChanged: (values) => {
  contactUsReq.reason_id = values?.id,
  setState(() {
    selectedReason = values;
  })
},

• 可选优化：如果listOfReason是接口异步返回的数据，要在接口赋值listOfReason的同时，判断selectedReason为空时再赋值默认值，避免空异常。

修改后完整下拉框代码示例 #

Container(
  margin: EdgeInsets.only(top: 30, bottom: 16),
  child: setUpDropDown<ContactUsReason>(
    title: context.getStrings().contactReason,
    context: context,
    list: listOfReason,
    itemWidget: (value) {
      return Text(value.reason.toString());
    },
    value: selectedReason,
    valueChanged: (values) => {
      contactUsReq.reason_id = values?.id,
      setState(() {
        selectedReason = values;
      })
    },
    onSaved: (value) => {
      contactUsReq.reason_id = value?.id
    },
    validator: DropDownValidator<ContactUsReason>(
      context.getStrings().contactReasonSelectionErrorText, 
      (value) {
        return value?.id != null;
      }
    ).get()
  ),
),

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