Flutter中如何基于另一集合的索引排序Firestore商品集合

我有一个名为products的Firestore集合，文档结构如下：

{
 "name": "Milk Shake Strawberry",
 "price": "250",
 "category": "Drinks",
 "categoryID":1234
},
{
 "name": "Swiss Roll",
 "price": "150",
 "category": "Cake",
 "categoryID":1235
}

目前已通过以下代码将商品数据映射为productItemsData：

List<Map<String, dynamic>?>? productItemsData = snapshots.data?.docs
                              .map((e) => e.data() as Map<String, dynamic>?)
                              .toList();

通过循环收集分类名称到_tabs列表，用于TabBar展示：

List<String> _tabs = [];

for (var doc in productItemsData!) {
    Map<String, dynamic> data = doc as Map<String, dynamic>;
    if (!_tabs.contains(data["category"])) {
        _tabs.add(data["category"]);
    }
}

并通过以下代码生成对应分类的商品Widget列表：

List<Widget> _list = [];
for (int i = 0; i < productItemsData!.length; i++) {
  if(productItemsData![i]!["category"] == category) {
    _list.add(_buildCustomProductTile(context, productItemsData![i]));
  }
} 
return _list;

现在需要根据另一个Firestore集合的分类索引重新排序分类及对应商品，该集合结构如下：

{
 "index": "0",
 "categoryName": "Drinks",
 "categoryID":1234
},
{
 "index": "1",
 "categoryName": "Cake",
 "categoryID":1235
}

已通过ReorderableListView的onReorder修改了分类索引，现在需要实现：利用该分类集合的索引，对products数据按分类索引排序，让UI按这个顺序展示商品。

1. 构建分类索引映射表 #

先从分类集合中获取数据，将分类名称（或ID）与对应的排序索引（转成整数，避免字符串排序问题）建立映射：

// 假设已获取分类集合的snapshot，转换为列表
List<Map<String, dynamic>> categoryIndexList = categorySnapshots.data!.docs
    .map((doc) => doc.data() as Map<String, dynamic>)
    .toList();

// 构建分类名称到排序索引的映射
Map<String, int> categoryIndexMap = {};
for (var item in categoryIndexList) {
    int sortIndex = int.parse(item["index"]);
    categoryIndexMap[item["categoryName"]] = sortIndex;
}

2. 重新排序分类标签列表_tabs #

基于上面的映射表，对_tabs按分类索引排序：

_tabs.sort((catA, catB) {
    // 给未定义索引的分类默认一个大值，确保排在最后
    int indexA = categoryIndexMap[catA] ?? 999;
    int indexB = categoryIndexMap[catB] ?? 999;
    return indexA.compareTo(indexB);
});

3. 按分类索引排序商品数据（可选） #

如果需要直接按分类索引顺序展示所有商品（而非Tab切换），可以对productItemsData进行排序：

productItemsData?.sort((itemA, itemB) {
    String catA = itemA?["category"] ?? "";
    String catB = itemB?["category"] ?? "";
    int indexA = categoryIndexMap[catA] ?? 999;
    int indexB = categoryIndexMap[catB] ?? 999;
    return indexA.compareTo(indexB);
});

4. 关联TabBarView与排序后的分类 #

由于_tabs已经按索引排序，TabBar会直接按新顺序展示标签，原来生成对应分类商品列表的逻辑无需修改，Tab切换时会自动匹配排序后的分类。

优化：用categoryID关联更可靠 #

如果存在分类名称重复的风险，建议用categoryID作为映射key，避免歧义：

// 构建categoryID到排序索引的映射
Map<int, int> categoryIndexMap = {};
for (var item in categoryIndexList) {
    int sortIndex = int.parse(item["index"]);
    int categoryID = item["categoryID"];
    categoryIndexMap[categoryID] = sortIndex;
}

// 排序_tabs时通过分类名称匹配对应的ID
_tabs.sort((catA, catB) {
    // 从分类列表中匹配分类名称对应的ID
    int? idA = categoryIndexList.firstWhere((item) => item["categoryName"] == catA)["categoryID"];
    int? idB = categoryIndexList.firstWhere((item) => item["categoryName"] == catB)["categoryID"];
    int indexA = categoryIndexMap[idA] ?? 999;
    int indexB = categoryIndexMap[idB] ?? 999;
    return indexA.compareTo(indexB);
});

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