ios – SwiftUI: Menu Sort Rule with forward/reverse indication


I want to achieve something like in the attached screenshot. I am talking about the circled chevron displaying the forward/reverse order on the selected sorting rule.

screenshot

When selecting the same sort type, I want to actually use the same selected type but to reverse the order from forward to reverse or other way around.

This the menu I have right now but the button action does not execute at all.
How can I achieve this?

Menu {
    Picker("Filtering", selection: viewModel.filterBinding) {
        ForEach(FilterType.allCases) { filterType in
            Text(filterType.rawValue)
                .tag(filterType)
        }
    }
    
    Divider()
    
    Picker("Sorting", selection: viewModel.sortingBinding) {
        ForEach(SortType.allCases) { sortType in
            Button {
                if viewModel.sortType == sortType {
                    viewModel.toggleSortOrder()
                }
            } label: {
                HStack {
                    Text(sortType.rawValue)
                    Image(systemName: viewModel.sortOrder == .forward ? "chevron.up" : "chevron.down")
                        .opacity(viewModel.sortType == sortType ? 1 : 0)
                }
            }
            .tag(sortType)
        }
    }
} label: {
    Image(systemName: "line.3.horizontal.decrease.circle.fill")
}

Here are the enums you also need (probably):

enum FilterType: String, Identifiable, CaseIterable {
    var id: Self { self }

    case all = "Al"
    case active = "Active"
    case retired = "Retired"
}

enum SortType: String, Identifiable, CaseIterable {
    var id: Self { self }

    case brand = "by Brand"
    case model = "by Model"
    case distance = "by Distance"
    case aquisitionDate = " by Aquisition Date"
}

Latest articles

spot_imgspot_img

Related articles

Leave a reply

Please enter your comment!
Please enter your name here

spot_imgspot_img