Flutter使用GetX的obs无法更新DropdownButtonFormField字段值如何解决

前置检查 #

确认你的控制器类继承自GetxController，示例正确声明如下：

class DesignationController extends GetxController {
  var listData = List<dynamic>.empty(growable: true).obs;
  var designation = 1.obs;

  void setDesignation(int value) {
    designation.value = value;
  }

  // 你的接口请求方法
  Future fetchDesignationList() async {
    final response = await 你的接口请求逻辑;
    final decodedList = jsonDecode(response.body);
    // 注意RxList的赋值方式，不要直接写 listData = decodedList
    listData.assignAll(decodedList);
  }
}

如果接口请求后赋值listData时直接用listData = 解码后的列表，会把响应式RxList替换为普通List，丢失响应式能力，必须用assignAll或者修改.value的方式赋值。

核心问题修复 #

你当前的下拉选中不更新是由于类型不匹配导致的值匹配失败，按以下步骤修改UI层代码即可：

1. 明确DropdownButtonFormField和DropdownMenuItem的泛型为int，和实际值类型保持一致
2. onChanged回调中对选中值做判空和类型转换后再传入控制器方法
3. 去掉value参数处多余的toInt()转换，designation本身是RxInt，.value已经是int类型
4. 明确DropdownMenuItem的value为int类型，避免json解析的类型差异导致匹配失败

修复后的UI层代码 #

Obx(() => DropdownButtonFormField<int>(
  decoration: InputDecoration(
    hintText: 'Designation',
    labelText: 'Select Designation',
    border: OutlineInputBorder(
      borderRadius: BorderRadius.circular(8),
    ),
    filled: true,
    fillColor: Colors.white,
    errorStyle: TextStyle(color: Colors.yellow),
  ),
  hint: const Text('Select Designation'),
  onChanged: (selectedValue) {
    if (selectedValue != null) {
      designation_controller.setDesignation(selectedValue);
    }
  },
  value: designation_controller.designation.value,
  items: designation_controller.listData.map((map) {
    return DropdownMenuItem<int>(
      child: Text(map['designation']),
      value: map['id'] as int,
    );
  }).toList(),
))

可选排查 #

如果修改后仍未生效，可以在setDesignation方法中添加打印，确认designation.value是否正常更新，同时打印map['id']的运行时类型，确认和designation.value的类型完全一致即可。

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