SwiftUI Segmented Picker在點擊時不切換

Question

我正在嘗試使用 SwiftUI 實現分段控制。 由於某種原因，分段選擇器在單擊時不會在值之間切換。 我瀏覽了許多教程，但找不到與我的代碼有任何區別：

struct MeetingLogin: View {
    @State private var selectorIndex: Int = 0

    init() {
        UISegmentedControl.appearance().backgroundColor = UIColor(named: "JobsLightGreen")
        UISegmentedControl.appearance().selectedSegmentTintColor = UIColor(named: "AlmostBlack")
        UISegmentedControl.appearance().setTitleTextAttributes([.foregroundColor: UIColor.white,
                                                                .font: UIFont(name: "OpenSans-Bold", size: 13)!],
                                                               for: .selected)
        UISegmentedControl.appearance().setTitleTextAttributes([.foregroundColor: UIColor.white,
                                                                .font: UIFont(name: "OpenSans-Regular", size: 13)!],
                                                               for: .normal)
    }

    var body: some View {
        VStack {

            ...

            Group {
                Spacer().frame(minHeight: 8, maxHeight: 30)
                Picker("video", selection: $selectorIndex) {
                    Text("Video On").tag(0)
                    Text("Video Off").tag(1)
                }
                .pickerStyle(SegmentedPickerStyle())
                .padding([.leading, .trailing], 16)

                Spacer().frame(minHeight: 8, maxHeight: 50)
                Button(action: { self.sendPressed() }) {
                    ZStack {
                        RoundedRectangle(cornerRadius: 100)
                        Text("go")
                            .font(.custom("Roboto-Bold", size: 36))
                            .foregroundColor(Color("MeetingGreen"))
                    }
                }
                .foregroundColor(Color("MeetingLightGreen").opacity(0.45))
                .frame(width: 137, height: 73)
            }
            Spacer()
        }
    }
}

任何建議將不勝感激！

Answer 1

更新：問題似乎是由於View的重疊而發生的，因為 RoundedRectangle 的cornerRadius 值設置為 100。將cornerRadius 的值設置為 55 將恢復Picker的功能。

該問題似乎是由於ZStack中的RoundedRectangle(cornerRadius: 100)引起的。 我沒有解釋為什么會這樣。 如果我發現了，我會添加原因。 可能是 SwiftUI 錯誤。 在找到任何相關證據之前我無法確定。 所以這里是可以使SegmentedControl正常工作的代碼。

struct MeetingLogin: View {
    //...
    @State private var selectorIndex: Int = 0

    var body: some View {
        VStack {
            //...
            Group {
                Spacer().frame(minHeight: 8, maxHeight: 30)
                Picker("video", selection: $selectorIndex) {
                    Text("Video On").tag(0)
                    Text("Video Off").tag(1)
                }
                .pickerStyle(SegmentedPickerStyle())
                .padding([.leading, .trailing], 16)

                Spacer().frame(minHeight: 8, maxHeight: 50)
                Button(action: { self.sendPressed() }) {
                    ZStack {
                        RoundedRectangle(cornerRadius: 55)
                        Text("go")
                            .font(.custom("Roboto-Bold", size: 36))
                            .foregroundColor(Color("MeetingGreen"))
                    }
                }
                .foregroundColor(Color("MeetingLightGreen").opacity(0.45))
                .frame(width: 137, height: 73)
            }
            Spacer()
        }
    }
}

Answer 2

您的代碼/視圖缺少 if 條件來了解當 selectorIndex 為 0 或 1 時會發生什么。

它必須看起來像這樣：

var body: some View {

    VStack {
        if selectorIndex == 0 {
    //....Your VideoOn-View 
    } else {
    //Your VideoOff-View
    }
}

Answer 3

Xcode 12 iOS 14 您可以通過在您的段控制（選擇器）的 tapGesture 上添加 if-else 條件來獲得它

@State private var profileSegmentIndex = 0
Picker(selection: self.$profileSegmentIndex, label: Text("Jamaica")) {
                    Text("My Posts").tag(0)
                
                Text("Favorites").tag(1)
            }
            .onTapGesture {
                if self.profileSegmentIndex == 0 {
                    self.profileSegmentIndex = 1
                } else {
                    self.profileSegmentIndex = 0
                }
            }
            .pickerStyle(SegmentedPickerStyle())
            .padding()

如果您需要將它與 2 個以上的段一起使用，您可以嘗試使用 Enum :)