SwiftUI Segmented Picker does not switch when click on it

Question

I'm trying to implement Segmented Control with SwiftUI. For some reason Segmented Picker does not switch between values when click on it. I went through many tutorials but cannot find any difference from my code:

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()
        }
    }
}

Would appreciate any suggestions!

Answer 1

Update: The issue seem to have occured due to overlapping of the View 's because the cornerRadius value of RoundedRectangle was set to 100. Bringing the value of cornerRadius to 55 would restore the Picker 's functionality.

The issue seems to be caused because of the RoundedRectangle(cornerRadius: 100) within the ZStack . I don't have and explanation as to why this is happening. I'll add the reason if I ever find out. Could be a SwiftUI bug. I can't tell untill I find any related evidence. So here is the code that could make the SegmentedControl work without any issue.

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

Your code/View is missing the if-condition to know what shall happen when the selectorIndex is 0 or 1.

It has to look like this:

var body: some View {

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

Answer 3

Xcode 12 iOS 14 you can get it by adding a if-else condition on the tapGesture of your Segment Control(Picker)

@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()

If you need to use it with more than 2 segments, you can try with an Enum:)