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