SwiftUI中如何按类型对费用列表视图进行分组？

问题分析 #

你当前的代码会给每个费用条目单独生成一个Section，原因是直接在ForEach(expenses.items)里嵌套Section，每个item对应一个Section，自然每个条目单独成组。要实现按类型分组，核心是先把数据按类型归类，再遍历类型生成Section，每个Section下展示对应类型的所有条目。

解决方案 #

1. 先按类型分组数据 #

在你的视图里添加一个计算属性，利用Swift的Dictionary(grouping:by:)方法把费用条目按type分组：

// 假设你的费用条目模型是ExpenseItem，包含type、name、amount属性
var groupedExpenses: [String: [ExpenseItem]] {
    Dictionary(grouping: expenses.items) { expenseItem in
        expenseItem.type
    }
}

这个属性会返回一个字典，键是费用类型（比如"Personal"、"Business"），值是对应类型的所有费用条目数组。

2. 遍历分组后的类型生成Section #

修改List的代码，遍历分组后的类型，每个类型对应一个Section，Section内部展示该类型的所有条目：

var body: some View {
    NavigationView {
        List {
            // 先把类型按字母顺序排序，也可自定义顺序
            ForEach(groupedExpenses.keys.sorted(), id: \.self) { type in
                Section(header: Text(type)) {
                    // 安全获取当前类型下的条目数组
                    if let items = groupedExpenses[type] {
                        ForEach(items) { item in
                            HStack {
                                Text(item.name)
                                Text(String(item.amount))
                                    .frame(maxWidth: .infinity, alignment: .trailing)
                            }
                        }
                    }
                }
            }
        }
        .navigationTitle("Expenses") // 可添加导航标题
    }
}

3. 自定义分组顺序（可选） #

如果你不想按字母顺序排列分组，而是想指定固定顺序（比如先显示"Personal"再显示"Business"），可以直接定义一个类型顺序数组：

var body: some View {
    NavigationView {
        List {
            // 自定义分组顺序
            let sortedTypes = ["Personal", "Business"]
            ForEach(sortedTypes, id: \.self) { type in
                // 只显示有对应条目的分组
                if let items = groupedExpenses[type], !items.isEmpty {
                    Section(header: Text(type)) {
                        ForEach(items) { item in
                            HStack {
                                Text(item.name)
                                Text(String(item.amount))
                                    .frame(maxWidth: .infinity, alignment: .trailing)
                            }
                        }
                    }
                }
            }
        }
        .navigationTitle("Expenses")
    }
}

补充说明 #

• 确保你的ExpenseItem模型遵循Identifiable协议（或者在ForEach里显式指定id参数），否则ForEach会报错。
• 用if let items = groupedExpenses[type]是为了处理字典取值的可选性，避免强制解包可能带来的崩溃（虽然这里分组出来的类型肯定对应条目，但加上更安全）。

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