Flutter中合并静态月份列表与API动态数据列表并实现搜索筛选

我有两个列表：一个是静态月份列表monthName，另一个是从API获取的动态数据列表updatedList。已经用json_to_dart生成了数据模型，实现了对应月份数据在卡片组件展示的功能。现在要给两个列表添加搜索筛选功能，之前尝试合并列表结果包含实例对象，现有筛选仅针对月份列表，需要实现同时对双列表进行筛选的功能。

现有代码 #

静态月份列表 #

List monthName = ["july", "august","september", "october","november", "december","january","febuary","march","april","may","june"];

API动态数据列表 #

var updatedList= [
{
  "transGroup": 1,
  "transType": 0,
  "serviceTypeId": 0,
  "serviceDescription": "Opening Balance",
  "financialYear": "2022/2023",
  "july": 54818.34,
  "august": 54818.34,
  "september": 0,
  "october": 0,
  "november": 0,
  "december": 0,
  "january": 0,
  "febuary": 0,
  "march": 0,
  "april": 0,
  "may": 0,
  "june": 0
},
{
  "transGroup": 990,
  "transType": 0,
  "serviceTypeId": 0,
  "serviceDescription": "Closing Balance",
  "financialYear": "2022/2023",
  "july": 54818.34,
  "august": 54818.34,
  "september": 0,
  "october": 0,
  "november": 0,
  "december": 0,
  "january": 0,
  "febuary": 0,
  "march": 0,
  "april": 0,
  "may": 0,
  "june": 0
 }
];

已实现的月份数据展示逻辑 #

List data = [];
int? monthIndex;
for (var i = 0; i < updatedList.length; i++) {
  if (monthName[monthIndex] == "July") {
    data.add(updatedList[i].july.toString());
  } else if (monthName[monthIndex] == "August") {
    data.add(updatedList[i].august.toString());
  } // 后续覆盖所有12个月
}

解决方案 #

核心思路 #

建立月份与动态数据的关联，筛选时同时匹配月份名称和对应月份的数据特征，最终返回绑定后的筛选结果，用于后续展示。

具体实现代码 #

// 搜索关键词，可替换为用户输入的值
String searchKeyword = "ju";

// 1. 统一关键词格式，避免大小写匹配问题
String lowerKeyword = searchKeyword.toLowerCase();

// 2. 筛选包含关键词的月份
List<String> filteredMonths = monthName.where((month) => month.contains(lowerKeyword)).toList();

// 3. 为筛选后的月份匹配对应动态数据（这里以提取非零值为例，可根据需求调整筛选规则）
Map<String, List<String>> filteredDataMap = {};
for (String month in filteredMonths) {
  List<String> monthData = [];
  for (var item in updatedList) {
    // 如果是json_to_dart生成的模型类，替换为模型的属性调用（比如item.july）
    double? value = item[month] as double?;
    // 可自定义筛选条件，比如匹配serviceDescription关键词、数值范围等
    if (value != null && value != 0) {
      monthData.add(value.toString());
    }
  }
  filteredDataMap[month] = monthData;
}

// 4. 展示筛选结果：遍历filteredMonths，从filteredDataMap中取对应数据渲染卡片
for (String month in filteredMonths) {
  List<String> data = filteredDataMap[month] ?? [];
  // 此处添加月份卡片渲染逻辑
}

优化建议（针对模型类） #

如果使用json_to_dart生成的模型，可添加自定义方法动态获取月份对应值，避免大量if-else判断：

// 假设模型类为Transaction
class Transaction {
  final double july;
  final double august;
  final double september;
  // ... 其他月份属性

  Transaction({required this.july, required this.august, required this.september, ...});

  // 根据月份名称获取对应数值
  double? getMonthValue(String month) {
    switch(month.toLowerCase()) {
      case "july": return july;
      case "august": return august;
      case "september": return september;
      // ... 覆盖剩余9个月份
      default: return null;
    }
  }
}

// 使用时替换原取值逻辑
double? value = item.getMonthValue(month);

内容的提问来源于stack exchange，提问作者Ravindra S. Patil