How to apply the corner radius to selected tab of Segment Picker in SwiftUI

40 Views Asked by At

I wanted to add the corner radius to the selected segement of picker. I did apply the cornerRadius modifier to the picker but it does not add radius to the selected tab.

import SwiftUI

struct SegmentPicker: View {
    @State var currentSelection = "Apple"
    @State var segmentSelections = ["Orange", "Banana", "Kiwi", "Apple"]
    
    init(){
        let segmentCotrol = UISegmentedControl.appearance()
        
        segmentCotrol.selectedSegmentTintColor = UIColor(Color.appGreen)
        segmentCotrol.backgroundColor = UIColor(Color.gray)
        segmentCotrol.layer.cornerRadius = 45
    }
    
    
    var body: some View {
        VStack{
            Picker("", selection: $currentSelection) {
                ForEach(segmentSelections, id: \.self) { option in
                    Text(option)
                }
            }
            .pickerStyle(.segmented)
            .frame(height: 40)
            .cornerRadius(45)
            .padding(.horizontal)
            
            
            
        }
    }
}

#Preview {
    SegmentPicker()
}

The corner radius is applied to the picker outer layer but it is not being applied for the selecteed tab.


        VStack{
            Picker("", selection: $currentSelection) {
                ForEach(segmentSelections, id: \.self) { option in
                    Text(option)
                }
            }
            .pickerStyle(.segmented)
            .frame(height: 40)
            .cornerRadius(45)
            .padding(.horizontal)

I also want to apply the corner radius here the selected/highlighted tab

0

There are 0 best solutions below