Flutter如何将对象列表转为下拉菜单？GetX下Dropdown报错如何解决

• 未给DropdownButton指定泛型类型，导致内部类型匹配逻辑混乱
• 直接将RxInt响应式对象传给value属性，没有读取实际的int值
• 没有用Obx包裹DropdownButton，无法响应状态变化，同时初始值匹配校验出错
• 若你的银行列表是异步加载的，会出现下拉组件先渲染、列表还未初始化的情况，导致初始值找不到对应的选项

1. 修改下拉组件代码 #

import 'package:flutter/material.dart';
import 'package:get/get.dart';
import 'package:soller_acessoria_new_app_nullsafety/views/informacoes/informacoes_controller.dart';

class DropDown extends GetView<InformacoesController> {
  const DropDown({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Obx(() {
      // 列表未加载完成时先显示加载提示，避免报错
      if (controller.banksList.isEmpty) {
        return const CircularProgressIndicator();
      }
      return DropdownButton<int>(
        value: controller.valueChosen.value,
        onChanged: (newValue) {
          if (newValue != null) {
            controller.valueChosen.value = newValue;
          }
        },
        items: controller.banksList.map((e) {
          return DropdownMenuItem<int>(
            value: e.code,
            child: Text(e.name),
          );
        }).toList(),
      );
    });
  }
}

2. 控制器补充校验 #

确认你的控制器中banksList的初始化时机早于页面渲染，若为异步获取的列表，需要等待列表加载完成后再赋值，同时确认初始值1确实存在于银行列表的code字段中：

//!DROPDOWN
// 响应式银行列表，若为静态列表也可直接定义为普通List
RxList<Banks> banksList = <Banks>[].obs;
RxInt valueChosen = 1.obs;

@override
void onInit() {
  super.onInit();
  // 初始化银行列表，若为接口请求要在这里做异步处理，加载完成再赋值
  banksList.assignAll([
    // 你的银行列表数据
  ]);
}

3. 异常兜底（可选） #

如果不确定初始值是否一定存在于列表中，可以在列表初始化后自动匹配第一个选项作为初始值：

// 列表赋值完成后执行
if (banksList.isNotEmpty) {
  // 检查初始值是否存在于列表中
  final hasMatch = banksList.any((e) => e.code == valueChosen.value);
  if (!hasMatch) {
    valueChosen.value = banksList.first.code;
  }
}

修改完成后下拉菜单就可以正常显示，选中选项后valueChosen中存储的就是对应银行的code，调用接口时直接传controller.valueChosen.value即可。

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