SwiftUI实现带正序/倒序标识的菜单排序规则问题

问题根源 #

Picker组件会优先处理自身的selection绑定逻辑，内部嵌套的Button点击事件会被Picker拦截，导致你写的切换排序顺序的代码完全无法触发。

修改后的代码 #

首先补充ViewModel的核心实现（假设你还未完善这部分）：

import SwiftUI

class ViewModel: ObservableObject {
    // 筛选相关
    @Published var filterType: FilterType = .all
    var filterBinding: Binding<FilterType> {
        Binding(get: { self.filterType }, set: { self.filterType = $0 })
    }
    
    // 排序相关
    @Published var sortType: SortType = .brand
    @Published var sortOrder: SortOrder = .forward
    
    func toggleSortOrder() {
        sortOrder = sortOrder == .forward ? .reverse : .forward
    }
    
    // 统一处理排序类型切换与顺序反转
    func setSortType(_ newType: SortType) {
        if sortType != newType {
            sortType = newType
            sortOrder = .forward
        } else {
            toggleSortOrder()
        }
    }
}

// 补充排序顺序枚举
enum SortOrder {
    case forward, reverse
}

然后修改Menu部分的代码：

@StateObject private var viewModel = ViewModel()

Menu {
    // 筛选Picker保留原逻辑
    Picker("Filtering", selection: viewModel.filterBinding) {
        ForEach(FilterType.allCases) { filterType in
            Text(filterType.rawValue)
                .tag(filterType)
        }
    }
    
    Divider()
    
    // 把排序Picker替换为独立Button组
    ForEach(SortType.allCases) { sortType in
        Button {
            viewModel.setSortType(sortType)
        } label: {
            HStack {
                Text(sortType.rawValue)
                // 仅当前选中的排序类型显示图标
                if viewModel.sortType == sortType {
                    Image(systemName: viewModel.sortOrder == .forward ? "chevron.up" : "chevron.down")
                }
            }
        }
    }
} label: {
    Image(systemName: "line.3.horizontal.decrease.circle.fill")
}

关键改动说明 #

• 移除排序部分的Picker，改用ForEach生成独立Button，确保点击事件能被正确触发
• ViewModel中新增setSortType方法，统一处理逻辑：
  • 点击未选中的排序类型：切换为该类型，重置排序顺序为正序
  • 点击已选中的排序类型：仅切换正序/倒序
• 通过条件判断控制图标显示，替代原有的opacity控制，逻辑更直观

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