SwiftUI中如何按相似标题动态分组List中的API数据？

核心思路 #

要实现按相似标题（或类别）动态分组，关键是先对产品数组做动态分组处理，再遍历分组结果生成Section，完全适配未来新增的未知类别。

步骤1：定义数据模型 #

确保产品模型遵循Identifiable（方便SwiftUI的ForEach遍历）：

struct Product: Identifiable {
    var id: Int
    var category: String
    var thumbnail: String
    var brand: String
    var description: String
    var title: String
}

步骤2：动态分组数据 #

利用Swift标准库的Dictionary(grouping:by:)方法，自动按指定规则分组。这里分两种常见场景：

场景1：按已有category字段分组（最可靠）

如果后端返回的category字段已经是你需要的分组依据（比如“智能手机”“笔记本电脑”），直接用它作为分组key：

// 假设这是从API获取的产品数组
var products: [Product] = []

// 自动生成分组字典：key为类别名，value为对应产品数组
var groupedProducts: [String: [Product]] {
    Dictionary(grouping: products) { $0.category }
}

场景2：从title中提取分组关键词

如果没有现成的category字段，需要从标题中提取核心类别（比如从“Apple iPhone 15 智能手机”中提取“智能手机”），可以写一个提取函数：

var groupedProducts: [String: [Product]] {
    Dictionary(grouping: products) { product in
        extractCategory(from: product.title)
    }
}

// 根据你的标题格式自定义提取逻辑，示例仅作参考
private func extractCategory(from title: String) -> String {
    // 示例：匹配标题中的明确类别关键词，无匹配则归为“其他”
    let keywords = ["智能手机", "笔记本电脑", "平板电脑", "耳机"]
    for keyword in keywords {
        if title.contains(keyword) {
            return keyword
        }
    }
    return "其他"
}

步骤3：在List中展示分组结果 #

遍历分组后的类别key（先排序保证展示顺序稳定），每个key对应一个Section，再在Section内遍历对应产品：

List {
    // 对类别key排序，避免Section顺序随机变化
    ForEach(groupedProducts.keys.sorted(), id: \.self) { category in
        Section(header: Text(category)) {
            // 遍历当前类别的所有产品
            ForEach(groupedProducts[category]!) { product in
                HStack(alignment: .top, spacing: 12) {
                    // 加载缩略图
                    AsyncImage(url: URL(string: product.thumbnail)) { image in
                        image.resizable()
                            .scaledToFill()
                            .frame(width: 60, height: 60)
                            .clipped()
                            .cornerRadius(8)
                    } placeholder: {
                        Color.gray.opacity(0.2)
                            .frame(width: 60, height: 60)
                            .cornerRadius(8)
                    }
                    
                    VStack(alignment: .leading, spacing: 4) {
                        Text(product.title)
                            .font(.subheadline)
                            .lineLimit(2)
                        Text(product.brand)
                            .font(.caption)
                            .foregroundColor(.secondary)
                    }
                }
                .padding(.vertical, 8)
            }
        }
    }
}

关键注意事项 #

• Dictionary(grouping:)会自动忽略空分组，不会生成无产品的Section
• 对分组key排序（sorted()）是为了避免每次数据刷新时Section顺序乱跳
• 若使用从标题提取类别的方式，需根据实际标题格式优化extractCategory函数，确保分组准确
• groupedProducts[category]可以安全强制解包，因为key来自分组字典的keys集合，必然存在对应值

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