SwiftUI中Picker选中同字段时切换排序顺序方案问询

问题描述 #

我正在使用Menu内的Picker对列表进行排序，目前Picker和基础排序功能均可正常工作，但缺少排序顺序切换的逻辑。预期行为：用户首次选择排序字段时，排序顺序为ASC升序；当再次选择同一字段时，排序顺序切换为DES降序。请问如何检测用户是否再次选中了Picker中的同一字段？或者是否有更优的实现方案？

现有代码 #

struct Book: Identifiable {
    let id = UUID()
    let title, author: String
    let sales: Int
}

enum SortField: String, CaseIterable {
    case title, author, sales
}

struct ContentView: View {
    
    @State private var items: [Book] = [
        .init(title: "Da Vinci Code,The", author: "Brown, Dan", sales: 5094805),
        .init(title: "Harry Potter and the Deathly Hallows", author: "Rowling, J.K.", sales: 4475152),
        .init(title: "Angels and Demons", author: "Brown, Dan", sales: 3193946),
        .init(title: "One Day", author: "Nicholls, David", sales: 1616068),
        .init(title: "Billy Connolly", author: "Stephenson, Pamela", sales: 1231957),
    ]
    
    @State private var selectedSortField: SortField = .title
    @State private var ascending: Bool = false
    
    var body: some View {
        NavigationView {
            Form {
                ForEach(items) { item in
                    HStack {
                        VStack(alignment: .leading) {
                            Text(item.title)
                                .font(.headline)
                            Text(item.author)
                        }
                        Spacer()
                        Text("\(item.sales)")
                            .font(.caption)
                    }
                }
            }
            .toolbar {
                Menu {
                    Picker(selection: $selectedSortField, label: Text("Sorting")) {
                        ForEach(SortField.allCases, id: \.self) { field in
                            HStack {
                                Text(field.rawValue)
                                if selectedSortField == field {
                                    Image(systemName: ascending ? "arrow.up" : "arrow.down")
                                }
                            }
                        }
                    }
                    .onChange(of: selectedSortField) { _ in sort() }
                } label: {
                    Label("Menu", systemImage: "ellipsis.circle")
                }
            }
        }
    }
    
    private func sort() {
        switch selectedSortField {
        case .title: items.sort { ascending ? $0.title < $1.title : $0.title > $1.title }
        case .author: items.sort { ascending ? $0.author < $1.author : $0.author > $1.author }
        case .sales: items.sort { ascending ? $0.sales < $1.sales : $0.sales > $1.sales }
        }
    }
    
}

解决方案 #

方案1：通过记录上次选中字段实现切换

新增一个状态变量保存上一次选中的排序字段，在字段变更时对比判断：

• 若切换到新字段：重置为升序，更新上次记录的字段
• 若选中同一字段：切换升序/降序状态

修改后的核心代码：

struct ContentView: View {
    // ... 原有变量不变
    @State private var lastSelectedSortField: SortField? = .title // 初始化默认值
    @State private var ascending: Bool = true // 初始设为升序
    
    var body: some View {
        NavigationView {
            // ... 原有视图不变
            .toolbar {
                Menu {
                    Picker(selection: $selectedSortField, label: Text("Sorting")) {
                        // ... 原有Picker内容不变
                    }
                    .onChange(of: selectedSortField) { newField in
                        if newField == lastSelectedSortField {
                            // 再次选中同一字段，切换顺序
                            ascending.toggle()
                        } else {
                            // 选中新字段，重置为升序
                            ascending = true
                            lastSelectedSortField = newField
                        }
                        sort()
                    }
                } label: {
                    Label("Menu", systemImage: "ellipsis.circle")
                }
            }
        }
    }
    
    // ... 原有sort()函数不变
}

方案2：封装排序状态为结构体（更优实践）

把排序字段和顺序封装成一个结构体，聚合相关状态，避免分散的变量管理，逻辑更清晰：

// 新增排序配置结构体
struct SortConfig: Equatable {
    var field: SortField
    var isAscending: Bool
}

struct ContentView: View {
    // ... 原有items变量不变
    // 替换原有selectedSortField和ascending为封装的状态
    @State private var sortConfig = SortConfig(field: .title, isAscending: true)
    
    var body: some View {
        NavigationView {
            Form {
                // ... 原有列表内容不变
            }
            .toolbar {
                Menu {
                    // 使用自定义绑定处理Picker选中事件
                    Picker(selection: Binding(
                        get: { sortConfig.field },
                        set: { newField in
                            if newField == sortConfig.field {
                                // 切换顺序
                                sortConfig.isAscending.toggle()
                            } else {
                                // 重置为升序
                                sortConfig = SortConfig(field: newField, isAscending: true)
                            }
                            sort()
                        }
                    ), label: Text("Sorting")) {
                        ForEach(SortField.allCases, id: \.self) { field in
                            HStack {
                                Text(field.rawValue)
                                if sortConfig.field == field {
                                    Image(systemName: sortConfig.isAscending ? "arrow.up" : "arrow.down")
                                }
                            }
                        }
                    }
                } label: {
                    Label("Menu", systemImage: "ellipsis.circle")
                }
            }
        }
    }
    
    // 更新sort函数引用封装的状态
    private func sort() {
        switch sortConfig.field {
        case .title: items.sort { sortConfig.isAscending ? $0.title < $1.title : $0.title > $1.title }
        case .author: items.sort { sortConfig.isAscending ? $0.author < $1.author : $0.author > $1.author }
        case .sales: items.sort { sortConfig.isAscending ? $0.sales < $1.sales : $0.sales > $1.sales }
        }
    }
}

方案对比 #

• 方案1实现简单，适合快速修改现有代码，状态分散但逻辑直观
• 方案2将排序相关状态聚合，符合SwiftUI状态管理的最佳实践，代码可维护性更强，推荐用于中大型项目

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