Flutter中如何将自定义Model列表转为字符串列表用于下拉菜单？

1. 修正数据访问方式 #

你直接用categories.CategoryName是错误的，因为categories是列表类型，必须先通过索引定位到具体的categoryListModel实例，再访问属性：

• 获取第一个分类名称：categories[0].CategoryName
• 获取第一个分类的第一个子分类：categories[0].SubCategories[0]

2. 修复打印显示问题 #

打印列表时显示Instance of 'categoryListModel'，是因为你的Model类没有重写toString()方法，添加后就能打印出具体内容：

class categoryListModel {
  String CategoryName;
  List<String> SubCategories;

  categoryListModel({
    required this.CategoryName,
    required this.SubCategories,
  });

  // 重写toString方法
  @override
  String toString() {
    return 'categoryListModel(CategoryName: $CategoryName, SubCategories: $SubCategories)';
  }
}

3. 实现下拉菜单（示例） #

单级分类下拉菜单 #

如果只需要展示主分类的下拉菜单，可使用DropdownButton组件：

String? selectedCategory;

@override
Widget build(BuildContext context) {
  return DropdownButton<String>(
    value: selectedCategory,
    hint: const Text('选择分类'),
    items: categories.map((category) {
      return DropdownMenuItem(
        value: category.CategoryName,
        child: Text(category.CategoryName),
      );
    }).toList(),
    onChanged: (value) {
      setState(() {
        selectedCategory = value;
      });
    },
  );
}

联动下拉菜单（主分类+子分类） #

如果需要实现选主分类后显示对应子分类的联动效果，可参考以下代码：

String? selectedMainCategory;
String? selectedSubCategory;

@override
Widget build(BuildContext context) {
  // 根据选中的主分类过滤子分类
  List<String> availableSubCategories = [];
  if (selectedMainCategory != null) {
    final selectedCategory = categories.firstWhere(
      (cat) => cat.CategoryName == selectedMainCategory,
    );
    availableSubCategories = selectedCategory.SubCategories;
  }

  return Column(
    children: [
      // 主分类下拉菜单
      DropdownButton<String>(
        value: selectedMainCategory,
        hint: const Text('选择主分类'),
        items: categories.map((category) {
          return DropdownMenuItem(
            value: category.CategoryName,
            child: Text(category.CategoryName),
          );
        }).toList(),
        onChanged: (value) {
          setState(() {
            selectedMainCategory = value;
            selectedSubCategory = null; // 切换主分类时重置子分类选中状态
          });
        },
      ),
      // 子分类下拉菜单（选中主分类后显示）
      if (selectedMainCategory != null)
        DropdownButton<String>(
          value: selectedSubCategory,
          hint: const Text('选择子分类'),
          items: availableSubCategories.map((subCat) {
            return DropdownMenuItem(
              value: subCat,
              child: Text(subCat),
            );
          }).toList(),
          onChanged: (value) {
            setState(() {
              selectedSubCategory = value;
            });
          },
        ),
    ],
  );
}

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