Flutter中如何为DropDownButton绑定自定义Data类的动态列表

• 类型不匹配：dataList 存储的是 Data 类实例，并非 Map 类型，原代码在map回调中直接将参数声明为Map map会触发类型转换异常。
• 字段引用错误：Data 类未定义name属性，你需要展示的是title字段，错误的字段取值会直接导致渲染失败。
• 缺少必要配置：DropdownButton 必须配置value（当前选中值）和onChanged（选中变更回调）两个核心参数，否则无法正常运行。
• 列表类型隐式风险：原dataList未指定泛型，运行时可能出现类型推断异常，建议显式声明为List<Data>。

1. 首先修正列表的类型声明：

// 显式指定泛型为Data
List<Data> dataList = [
  Data(
      title: "选项1",
      image: "xxx",
      link: "xxx",
      color: Colors.red),
  Data(
      title: "选项2",
      image: "xxx",
      link: "xxx",
      color: Colors.blue),
  // 其他实例
];

2. 在State类中声明当前选中值的变量：

// 因为Data的title是可空类型，所以选中值也声明为可空String
String? selectedTitle;

3. 修正DropdownButton的实现代码：

@override
Widget build(BuildContext context) {
  return Container(
    child: Center(
      child: DropdownButton<String>(
        // 绑定当前选中值
        value: selectedTitle,
        // 选中回调，更新选中值
        onChanged: (String? newValue) {
          setState(() {
            selectedTitle = newValue;
          });
        },
        // 生成下拉选项列表
        items: dataList.map((Data data) {
          return DropdownMenuItem<String>(
            // 用data的title作为value，处理空值场景
            value: data.title,
            child: Text(
              // 空值兜底展示，避免空字符串渲染异常
              data.title ?? '未命名选项',
            ),
          );
        }).toList(),
      ),
    ),
  );
}

如果需要同时展示Data类的image和color属性，只需要修改DropdownMenuItem的child参数即可：

DropdownMenuItem<String>(
  value: data.title,
  child: Row(
    children: [
      Container(
        width: 10,
        height: 10,
        color: data.color ?? Colors.grey,
        margin: const EdgeInsets.only(right: 8),
      ),
      // 如果你要展示网络图片可以用Image.network
      // Image.network(data.image ?? '', width: 20, height: 20),
      Text(data.title ?? '未命名选项'),
    ],
  ),
)

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