SwiftUI - Picker .onChange 和 didSet

Question

我正在嘗試實現所附 GIF 中的行為：

對不起，高速，我不得不大幅壓縮它才能上傳到這里。 如果您想自己查看，該應用程序是來自 Readdle 的“文檔”。

無論如何：我正試圖實現這種行為（排序和過濾，包括動態向上箭頭圖標）。

我嘗試了以下方法，但是我無法實現這種“ontap”體驗。 On Change 僅在我更改值時觸發，但是當我想對現有值進行升序和降序排序時，它不起作用（這很明顯，因為它沒有改變）。 我已經玩過“didSet”，但這也不起作用。

你知道如何做到這一點嗎？

下面是我的代碼：

import SwiftUI

struct ContentView: View {
    
    @State var selection = 0
    @State var sortByAsc = true
    @State var filterColumn = "A"
    
    //Test to set case via picker but picter doesnt execute didSet
    @State var myFilterTest: MyFilters = .alphabetical {
        didSet {
            switch myFilterTest {
            case .creationDate:
                sortByAsc.toggle()
                print("c")
                
            case .rating:
                sortByAsc.toggle()
                print("b")
                
            case .alphabetical:
                sortByAsc.toggle()
                print("a")
            }
        }
    }
    
    var body: some View {
        NavigationView {
            Text("Hello, World!")
                .padding()
                .navigationTitle("SwiftUI")
                .toolbar {
                    ToolbarItem(placement: .navigationBarTrailing) {
                        Menu(content: {
                            
                            Picker("My Picker", selection: $selection) {
                                Label("Title", systemImage: sortByAsc ? "arrow.down" : "arrow.up")
                                    .tag(0)
                                Label("Rating", systemImage: sortByAsc ? "arrow.down" : "arrow.up")
                                    .tag(1)
                                    .onTapGesture {
                                        print("tap")
                                    }
                            }
                            .onChange(of: selection) { tag in
                                print("Selected Tag: \(tag)")
                                sortByAsc.toggle()
                                if(tag == 0) {
                                    filterColumn = "Title"
                                }
                                if(tag == 1) {
                                    filterColumn = "Rating"
                                }
                            }
                        }, label: {
                            Image(systemName: "ellipsis.circle")
                        })
                    }
                }
        }
    }
}

enum MyFilters: CaseIterable {
    case alphabetical
    case rating
    case creationDate
}

Answer 1

解決了。 這是代碼：

struct PickerView: View {
    
    @State private var pickerIndex = 0
    @State private var previousPickerIndex = 0
    @State var sortByAsc = true
    
    var body: some View {
        
        let pickerSelection = Binding<Int>(get: {
            return self.pickerIndex
        }, set: {
            self.pickerIndex = $0
            if(pickerIndex == previousPickerIndex) {
                sortByAsc.toggle()
            }
            previousPickerIndex = pickerIndex
        })
        
        NavigationView {
            Text("Hello, World!")
                .padding()
                .navigationTitle("SwiftUI")
                .toolbar {
                    ToolbarItem(placement: .navigationBarTrailing) {
                        Menu(content: {
                            Picker("My Picker", selection: pickerSelection) {
                                ForEach(0..<4, id: \.self) { index in
                                    Label("Title \(index)", systemImage: getSortingImage(menuItem: index))
                                        .tag(index)
                                }
                            }
                        }, label: {
                            Image(systemName: "ellipsis.circle")
                        })
                    }
                }
        }
    }
    
    func getSortingImage(menuItem: Int) -> String {
        if(menuItem == pickerIndex) {
            if(sortByAsc) {
                return "arrow.down"}
            else {
                return "arrow.up"
            }
        }
        else {
            return ""
        }
    }
    
}