Flutter&Dart：从Hive List生成DropdownMenuItem列表报错如何解决？

问题原因 #

• 最直接的报错原因是函数返回类型不匹配：你将getProjects函数的返回类型声明为void，但函数末尾执行了return menuItems返回了List<DropdownMenuItem<dynamic>>类型的变量，和声明的返回类型冲突。
• 额外逻辑问题：你当前的函数是async异步函数，就算要返回列表也需要将返回类型声明为Future<List<DropdownMenuItem<dynamic>>>，且调用时需要用await接收返回值，否则无法直接把返回值传给DropdownButton的items参数。

修复方案 #

推荐你将生成的下拉选项列表也存入组件的状态中，不需要通过函数返回值传递，修改后的参考代码如下：

// 类的状态变量中新增下拉选项列表和选中值变量
List<LiveProject> lists = [];
List<DropdownMenuItem<String>>? dropdownItems;
String? selectedValue;

void getProjects() async {
  final box = await Hive.openBox<LiveProject>('project');
  // 拿到数据后一次性更新状态
  setState(() {
    lists = box.values.toList();
    dropdownItems = lists.map((p) => DropdownMenuItem(
      child: Text(p.title.toString()),
      value: p.id.toString(),
    )).toList();
    // 可选：给选中值赋默认值
    if (dropdownItems!.isNotEmpty) {
      selectedValue = dropdownItems!.first.value;
    }
  });
}

// 组件build方法里DropdownButton的写法
DropdownButton(
  value: selectedValue,
  items: dropdownItems,
  // 必须实现onChanged回调更新selectedValue的状态
  onChanged: (val){
    setState(() {
      selectedValue = val as String;
    });
  },
)

如果你确实需要通过getProjects函数返回下拉选项列表，只需要修改函数的返回类型声明即可：

Future<List<DropdownMenuItem<dynamic>>> getProjects() async {
  final box = await Hive.openBox<LiveProject>('project');
  List<LiveProject> lists = box.values.toList();
  return lists.map((p) => DropdownMenuItem(
    child: Text(p.title.toString()),
    value: p.id.toString(),
  )).toList();
}

这种方式调用时需要配合FutureBuilder来渲染DropdownButton组件。

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