How do I style Text in SwiftUI Picker View?

Question

I have a time picker in SwiftUI and any modification that I apply to the Text values in the picker are ignored. How do I do this correctly? I am using Xcode 13 on Big Sur.

Here is the result without any modification:

I want the times to be larger and white so I added .font() and .foregroundColor() modifiers. Here is my code:

struct TimerPicker: View {
    @Binding var customTime: CustomTime
    
    var body: some View {
        GeometryReader { geometry in
            HStack (spacing: 0.0){
                VStack {
                    Picker(selection: self.$customTime.selectedHour, label: Text("Hrs")) {
                        ForEach(0..<24) { hour in
                            Text("\(hour) hrs")
                                .foregroundColor(.white)
                                .font(.title3)
                        }
                    }
                }
                .frame(width: geometry.size.width * 0.33)
                .clipped()
                
                VStack {
                    Picker(selection: self.$customTime.selectedMin, label: Text("Min")) {
                        ForEach(0..<61) { min in
                            Text("\(min) min")
                                .foregroundColor(.white)
                                .font(.title3)
                        }
                    }
                }
                .frame(width: geometry.size.width * 0.33)
                .clipped()
                
                VStack {
                    Picker(selection: self.$customTime.selectedSecond, label: Text("Sec")) {
                        ForEach(0..<61) { sec in
                            Text("\(sec) sec")
                                .foregroundColor(.white)
                                .font(.title3)
                        }
                    }
                }
                .frame(width: geometry.size.width * 0.33)
                .clipped()
                .transition(.scale)
            }
        } //: Geometry
    }
}

There is no change in the styling of the picker values. What is the correct way to do this?

score 2 · Accepted Answer · answered Oct 27 '21 at 03:42

Your code seems to work for me, although I made the following small modifications. This is the code that works for me: (note there is no 60 min or 60 sec)

import SwiftUI

@main
struct TestApp: App {
    var body: some Scene {
        WindowGroup {
            ContentView()
        }
    }
}

struct ContentView: View {
    @State var customTime = CustomTime()
    
    var body: some View {
        Spacer()
        TimerPicker(customTime: $customTime)
        Spacer()
    }
}

struct CustomTime: Identifiable, Hashable {
    let id = UUID()
    var selectedHour = 0
    var selectedMin = 0
    var selectedSecond = 0
}

struct TimerPicker: View {
    @Binding var customTime: CustomTime
    
    var body: some View {
        GeometryReader { geometry in
            HStack (spacing: 0.0){
                VStack {
                    Picker(selection: $customTime.selectedHour, label: Text("Hrs")) {
                        ForEach(0..<24) { hour in
                            Text("\(hour) hrs").tag(hour) // <--- tag
                                .foregroundColor(.white)
                                .font(.title3)
                        }
                    }
                }
                .frame(width: geometry.size.width * 0.33)
                .clipped()
                
                VStack {
                    Picker(selection: $customTime.selectedMin, label: Text("Min")) {
                        ForEach(0..<60) { min in  // <--- only to 59
                            Text("\(min) min").tag(min) // <--- tag
                                .foregroundColor(.white)
                                .font(.title3)
                        }
                    }
                }
                .frame(width: geometry.size.width * 0.33)
                .clipped()
                
                VStack {
                    Picker(selection: $customTime.selectedSecond, label: Text("Sec")) {
                        ForEach(0..<60) { sec in  // <--- only to 59
                            Text("\(sec) sec").tag(sec) // <--- tag
                                .foregroundColor(.white)
                                .font(.title3)
                        }
                    }
                }
                .frame(width: geometry.size.width * 0.33)
                .clipped()
                .transition(.scale)
            }
            .pickerStyle(.wheel)    // <--- here
            .background(Color.red)  // <--- here
        } //: Geometry
    }
}

The key here was adding .pickerStyle(.wheel). That restored the color to the text. There is one remaining issue. When I try to scroll, the scrolling for each wheel overlaps the one to the left. Does that happen to you as well? For example, if I scroll on seconds it works, but if I try to scroll on minutes it moves the seconds wheel and I can't move the hours wheel at all. — forrest, Oct 28 '21 at 20:06
see my answer here: https://stackoverflow.com/questions/69365738/pickers-are-overlapping-in-ios-15-preventing-some-of-them-to-be-scrolled/69384171#69384171 for the Picker overlapping each other. Give it a tick if it works for you. — workingdog support Ukraine, Oct 29 '21 at 12:17
I did review it and it does work. One caveat, you have to set a fixed .frame width for it to work correctly. Tick given. Thank you. — forrest, Nov 02 '21 at 01:28

How do I style Text in SwiftUI Picker View?

1 Answers1