Flutter DropdownButton选中ID保存但显示名称不更新问题求助

核心问题分析 #

你的代码中，DropdownButton的value绑定分类ID（category），显示文本依赖_journalsCategory中对应ID的name字段。显示不更新的主要原因包括：

• 分类数据加载时机错误，未通过setState同步到组件状态
• onChanged中存在无用代码，干扰状态更新逻辑
• 初始category值可能未匹配到_journalsCategory中的有效项

修复步骤及代码调整 #

1. 正确加载分类数据并同步状态

将分类数据加载逻辑放到initState中，确保数据加载完成后更新组件状态：

late List<Map<String, dynamic>> _journalsCategory;
int? category;

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

Future<void> _loadCategories() async {
  final fetchedCategories = await SQLHelper().getCategory();
  setState(() {
    _journalsCategory = fetchedCategories ?? [];
    // 初始无选中项时，默认选中第一个分类
    if (category == null && _journalsCategory.isNotEmpty) {
      category = _journalsCategory.first["id"] as int;
    }
  });
}

2. 简化DropdownButton代码，确保类型匹配

移除onChanged中的无用代码，明确指定泛型类型，避免类型推断错误：

DropdownButton<int>(
  value: category,
  isExpanded: true,
  // 数据未加载完成时显示占位提示
  hint: _journalsCategory.isEmpty ? const Text("加载中...") : null,
  items: _journalsCategory.map((categoryItem) {
    return DropdownMenuItem<int>(
      child: Text(categoryItem["name"] as String),
      value: categoryItem["id"] as int,
    );
  }).toList(),
  onChanged: (selectedId) {
    if (selectedId != null) {
      setState(() {
        category = selectedId;
      });
    }
  },
),

3. 验证SQLHelper返回数据类型

确保SQLHelper.getCategory()返回的id是int类型，避免类型不匹配导致DropdownButton无法匹配选中项：

Future<List<Map<String, dynamic>>?> getCategory() async {
  final Database? db = await database;
  final result = await db?.rawQuery('SELECT name, id FROM categories');
  return result?.map((item) {
    return {
      "name": item["name"] as String,
      "id": item["id"] as int, // 强制转换为int类型
    };
  }).toList();
}

关键说明 #

• 必须通过setState更新_journalsCategory和category，确保组件感知状态变化并重建
• DropdownButton的value必须与某个DropdownMenuItem的value完全匹配（类型+值），否则无法正确显示选中项文本
• 加入数据加载占位提示，提升用户体验

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