如何在Flutter中使用DropdownSearch获取选中项的ID

问题描述 #

使用DropdownSearch组件展示学年列表时，当前下拉列表显示accYear字段内容，但需要将选中项的id值赋值给academicYearController.text，现有代码无法实现该需求，相关代码如下：

现有DropdownSearch代码 #

child: DropdownSearch < dynamic > (
  autoValidateMode: AutovalidateMode.onUserInteraction,
  validator: (value) =>
  value == null ? "Academic Year is required " : null,
  dropdownDecoratorProps: const DropDownDecoratorProps(
      dropdownSearchDecoration: InputDecoration(
        hintText: "Select academic year",
        helperText: '',
        labelText: "Academic Year *",
        contentPadding: EdgeInsets.fromLTRB(12, 12, 0, 0),
        border: OutlineInputBorder(),
      ),
    ),
    items: dataService.academicYearList.map((AcademicYear yr) {
      return yr.accYear.toString();
    }).toList(),
    // items: dataService.academicYearList.map((AcademicYear yr) {
    //   return DropdownMenuItem(
    //     child: Text(yr.id.toString()),
    //     value: yr.id,
    //   );
    // }).toList(),
    onChanged: (value) {
      academicYearController.text = value;
      setState(() {
        dataService.selectedAcademicYear = dataService.selected;
      });
      debugPrint('selectedId: ${academicYearController.text}');
    },
),

AcademicYear类定义 #

class AcademicYear {
  int id;
  String accYearId;
  String accYear;
  int status;

  AcademicYear({
    required this.id,
    required this.accYearId,
    required this.accYear,
    required this.status,
  });

  // 示例数据：{"id": 1,"accYearId": "20212022","accYear": "20212022","status": 1}
}

API请求代码 #

Future < List < AcademicYear >> getYears() async {
  academicUrl = "${dataService.baseUrl}/academicyear";

  http.Response response = await http.get(
    Uri.parse(academicUrl),
    headers: {
      "Content-Type": "application/json",
    },
  );

  List < AcademicYear > result(dynamic str) => List < AcademicYear > .from(
    json.decode(str).map((x) => AcademicYear.fromJson(x)));

  if (response.statusCode == 200) {
    return result(response.body);
  } else {
    throw Exception('error loading object');
  }
}

解决方法 #

核心思路是直接将AcademicYear对象作为DropdownSearch的选项，通过itemAsString指定下拉列表显示的字段为accYear，这样onChanged回调中就能拿到完整的AcademicYear对象，进而提取id赋值给控制器。

修改后的DropdownSearch代码如下：

child: DropdownSearch<AcademicYear>(
  autoValidateMode: AutovalidateMode.onUserInteraction,
  validator: (value) => value == null ? "Academic Year is required " : null,
  dropdownDecoratorProps: const DropDownDecoratorProps(
    dropdownSearchDecoration: InputDecoration(
      hintText: "Select academic year",
      helperText: '',
      labelText: "Academic Year *",
      contentPadding: EdgeInsets.fromLTRB(12, 12, 0, 0),
      border: OutlineInputBorder(),
    ),
  ),
  // 直接传入AcademicYear对象列表，无需转为字符串
  items: dataService.academicYearList,
  // 指定下拉列表显示的文本为accYear字段
  itemAsString: (AcademicYear year) => year.accYear,
  onChanged: (AcademicYear? selectedYear) {
    if (selectedYear != null) {
      // 将选中项的id转为字符串后赋值给控制器
      academicYearController.text = selectedYear.id.toString();
      setState(() {
        dataService.selectedAcademicYear = selectedYear;
      });
      debugPrint('selectedId: ${academicYearController.text}');
    }
  },
),

关键修改点说明 #

1. 修正泛型类型：将DropdownSearch<dynamic>改为DropdownSearch<AcademicYear>，明确选项类型为AcademicYear对象。
2. 调整items配置：直接传入dataService.academicYearList（List<AcademicYear>类型），不再将列表转为字符串集合。
3. 添加itemAsString参数：通过该参数指定下拉列表中显示的文本内容为year.accYear，满足显示accYear字段的需求。
4. 优化onChanged回调：参数类型改为AcademicYear?，判断非空后直接提取selectedYear.id并转为字符串赋值给控制器，同时更新选中的学年对象。

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