Swift中如何过滤ForEach List实现分性别用户列表并修复空白问题

问题现象 #

从用户数组生成男女分栏列表后，男性列表能正常显示用户内容，女性列表的Section标题存在，但列表内容空白，同时列表需支持删除操作。

原结构体定义：

struct Users: Identifiable, Codable {
    var id = UUID()
    
    let name: String
    let age: String
    let country: String
    let gender: String
} 

原列表代码：

List {
    Section {
        ForEach(Users) { user in
            if user.gender == "Male" {
            HStack {
                VStack(alignment: .leading) {
                    Text(user.name)
                        .font(.headline)
                    Text(user.age)
                }
            }
          }
        }
        .onDelete(perform: removeItems)
        
    } header: {
        Text("Male users")
    }
    Section {
        ForEach(Users) { user in
           if user.gender == "Female" {
            HStack {
                VStack(alignment: .leading) {
                    Text(user.name)
                        .font(.headline)
                    Text(user.age)
                }
            }
          }
        }
        .onDelete(perform: removeItems)
        
    } header: {
        Text("Female users")
    }
}

问题原因 #

1. ForEach参数错误：原代码中ForEach(Users)直接传入结构体类型而非数组实例，属于语法错误，男性列表看似正常是偶然情况；
2. 过滤逻辑位置错误：在ForEach内部通过if判断过滤用户，会导致SwiftUI无法正确追踪列表元素标识，引发渲染异常，同时会干扰onDelete操作的正确性。

修复方案 #

1. 定义可观察的用户数组实例，用@State或@ObservedObject修饰；
2. 提前通过计算属性过滤出男性、女性用户数组，避免在ForEach内做条件判断；
3. 修正ForEach参数为过滤后的数组，确保每个Section只处理对应性别的用户；
4. 调整删除方法，通过用户ID定位原数组元素，保证删除操作有效。

修正后的完整代码 #

// 修正结构体命名为单数User，符合Swift命名规范
struct User: Identifiable, Codable {
    var id = UUID()
    
    let name: String
    let age: String
    let country: String
    let gender: String
}

struct ContentView: View {
    // 示例用户数组，可根据实际需求替换
    @State private var users: [User] = [
        User(name: "John", age: "25", country: "USA", gender: "Male"),
        User(name: "Mary", age: "22", country: "Canada", gender: "Female"),
        User(name: "Mike", age: "30", country: "UK", gender: "Male"),
        User(name: "Lisa", age: "28", country: "Australia", gender: "Female")
    ]
    
    // 提前过滤男性用户
    var maleUsers: [User] {
        users.filter { $0.gender == "Male" }
    }
    
    // 提前过滤女性用户
    var femaleUsers: [User] {
        users.filter { $0.gender == "Female" }
    }
    
    var body: some View {
        List {
            Section {
                ForEach(maleUsers) { user in
                    HStack {
                        VStack(alignment: .leading) {
                            Text(user.name)
                                .font(.headline)
                            Text(user.age)
                        }
                    }
                }
                .onDelete(perform: removeMaleItem)
                
            } header: {
                Text("Male users")
            }
            
            Section {
                ForEach(femaleUsers) { user in
                    HStack {
                        VStack(alignment: .leading) {
                            Text(user.name)
                                .font(.headline)
                            Text(user.age)
                        }
                    }
                }
                .onDelete(perform: removeFemaleItem)
                
            } header: {
                Text("Female users")
            }
        }
    }
    
    // 删除男性用户的逻辑
    private func removeMaleItem(at offsets: IndexSet) {
        let targetIds = offsets.map { maleUsers[$0].id }
        users.removeAll { targetIds.contains($0.id) }
    }
    
    // 删除女性用户的逻辑
    private func removeFemaleItem(at offsets: IndexSet) {
        let targetIds = offsets.map { femaleUsers[$0].id }
        users.removeAll { targetIds.contains($0.id) }
    }
}

关键改动说明 #

• 用计算属性提前过滤用户，让ForEach直接处理目标数据，避免渲染异常；
• 通过用户ID定位原数组元素执行删除，保证删除操作的准确性；
• 修正结构体命名为单数User，符合Swift命名规范。

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