Flutter下拉框值为ID时如何获取分类名称及解决ID显示问题

核心问题分析 #

1. ID显示不规整：当前代码未在选中选项后更新下拉框的显示文本，且未绑定选中值，导致选中后仍显示初始提示文本，视觉上不规整。
2. 获取对应分类名称：需要通过选中的ID在分类列表中匹配对应的名称字段。

修改后的完整代码 #

状态变量调整

List categoriesList = [];
String selectedCategory = "Select Category";
int? selectedCategoryId; // 专门存储选中的分类ID，用于存入数据库

DropdownButton优化

DropdownButton<int>(
  value: selectedCategoryId, // 绑定选中的ID，确保下拉框显示对应选项
  items: categoriesList.map((item) {
    return DropdownMenuItem(
      child: Text(item['name'].toString()),
      value: item['id'] as int, // 直接使用int类型ID，避免频繁类型转换
    );
  }).toList(),
  onChanged: (changedCategoryId) {
    setState(() {
      selectedCategoryId = changedCategoryId;
      // 根据选中的ID匹配对应的分类名称
      final selectedItem = categoriesList.firstWhere(
        (item) => item['id'] == changedCategoryId,
        orElse: () => {'name': '未知分类'}
      );
      selectedCategory = selectedItem['name'].toString();
      // 此时selectedCategoryId就是要存入数据库的ID，selectedCategory是显示名称
      print('选中ID: $selectedCategoryId，对应名称: $selectedCategory');
    });
  },
  hint: Text(selectedCategory),
  isExpanded: true, // 可选：让下拉框占满父容器宽度，显示更规整
),

数据获取代码优化（处理ID类型）

@override
void initState() {
  fetchCategories();
  super.initState();
}

fetchCategories() async {
  var fetchedCategoriesList = await http.get(Uri.parse("${AppConfig.BASE_URL}categories"));
  var decodedFetchedCategoriesList = json.decode(fetchedCategoriesList.body)['data'];
  setState(() {
    // 统一转换ID为int类型（如果接口返回的是字符串ID）
    categoriesList = decodedFetchedCategoriesList.map((item) {
      return {
        'id': int.parse(item['id'].toString()),
        'name': item['name'].toString()
      };
    }).toList();
  });
}

关键说明 #

• 类型统一：指定DropdownButton泛型为<int>，直接使用int类型的ID作为value，避免字符串与int之间的频繁转换，减少类型错误。
• 双向绑定：通过value: selectedCategoryId绑定选中值，确保下拉框选中后自动显示对应分类名称，解决显示不规整问题。
• 名称匹配：使用firstWhere方法在分类列表中快速匹配选中ID对应的名称，更新显示文本。
• 数据库存储：后续直接使用selectedCategoryId变量的值存入数据库即可。

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