如何从下拉列表中删除重复值| Flutter

Question

child: DropdownButtonHideUnderline(
child: DropdownButton(
value: selectedCategory,
hint: Text(
'Select Category',
style: TextStyle(color: Colors.grey[600]),
),
icon: Icon(
Icons.arrow_drop_down,
color: Colors.grey[600],
),
items: jobFairData.map(
(list) {
return DropdownMenuItem(
child: Text(
list['categoryName'],
style: TextStyle(color: Theme.of(context).accentColor),
),
value: list['categoryId'].toString(),
);
},
).toList(),
onChanged: (value) => setState(() => selectedCategory = value),
),
),  

这是我的下拉列表代码，与来自API的值。问题是来自API的值包含重复的值。这会导致应用程序崩溃。

如何避免重复值并将数据显示到下拉列表中?

Answer 1

如果您的数据是这样的:

final jobFairData = [
{
'categoryId': 1,
'categoryName': 'Category 1',
},
{
'categoryId': 2,
'categoryName': 'Category 2',
},
{
'categoryId': 2,
'categoryName': 'Category 2',
},
{
'categoryId': 3,
'categoryName': 'Category 3',
},
];

那么，jobFairData.toSet()将不能工作，因为两个相同的项目{'categoryId': 2, 'categoryName': 'Category 2'}不相等，是两个不同的对象。

有很多方法可以从这样的列表中删除相同的项。以下是一些:

在categoryId上使用toSet():

final ids = jobFairData.map((d) => d['categoryId']).toSet();
filteredJobFairData.value = jobFairData
..retainWhere((element) => ids.remove(element['categoryId']));

在映射{categoryId: categoryName}中转换列表

jobsFairData.fold<Map<String, String>>({}, (acc, curr) => acc..[curr['categoryId']] = curr['categoryName']);

您定义items的方式:

items: jobFairData.entries
.map((category) => DropdownMenuItem(
child: Text(
category.value,
style: TextStyle(color: Theme.of(context).accentColor),
),
value: category.key,
))
.toList(),

定义一个合适的Category类并使用toSet():

领域模型类，使用冷冻包:

@freezed
abstract class Category with _$Category {
const factory Category({String id, String name}) = _Category;
factory Category.fromJson(Map<String, dynamic> json) =>
_$CategoryFromJson(json);
}

一旦你有了这样一个类，你可以从JSON数据中获得一个List<Category，然后使用toSet().toList()的技巧来删除重复的:

final jobFairData = jsonData.map((json) => Category.fromJson(json)).toSet().toList();

注意:这样做可能会丢失原始数据的顺序。

这个解决方案的主要好处是你的类别现在是Category对象，而不是通用的Map<String, dynamic。你的DropDownButton的items定义更健壮:

items: jobFairData
.map(
(category) => DropdownMenuItem(
child: Text(
category.name,
style: TextStyle(color: Theme.of(context).accentColor),
),
value: category.id,
),
)
.toList(),