How to change the Picker menu text size in SwiftUI?

user_16153605 0
Viewed 3961

I have a Picker of style Menu and I need to change its text size (the blue text), I tried the .font(.largeTitle) modifier but it didn't work.

enum Privacy: String, Identifiable, CaseIterable {
    case open = "Open"
    case closed = "Closed"
    var id: String { self.rawValue }
}

struct ContentView: View {
    @State var selection = Privacy.open
    var body: some View {
        Picker("Privacy", selection: $selection) {
            ForEach(Privacy.allCases) { value in
                Text(value.rawValue)
                    .tag(value)
                    .font(.largeTitle)
            }
        }
        .font(.largeTitle)
        .pickerStyle(.menu)
    }
}

swiftui swift ios
4 Answers

Remove the .menu style and just wrap it in Menu instead, with a custom label:

Menu {
    Picker(selection: $selection) {
        ForEach(Privacy.allCases) { value in
            Text(value.rawValue)
                .tag(value)
                .font(.largeTitle)
        }
    } label: {}
} label: {
    Text("Privacy")
        .font(.largeTitle)
}
user_96078630

If someone needs to show selected value as label (instead of static text) in this scenario, the following variant can be used

Tested with Xcode 13.2 / iOS 15.2

demo

Menu {
    Picker(selection: $selection) {
        ForEach(Privacy.allCases) { value in
            Text(value.rawValue)
                .tag(value)
        }
    } label: {}
} label: {
    Text(selection.rawValue)
        .font(.largeTitle)
}.id(selection)
user_122990300

I found that the Menu { Picker() {} } trick did broken things on Mac (nests the proper menu inside a single item menu). But this slight mod is so far working cleanly across iPhone, iPad, and Mac:

Menu {
    ForEach(RowLabelType.allCases, id: \.self) { type in
        Button {
            todayTabRowLabels = type
        } label: {
            Text(type.displayString)
        }
    }
} label: {
    Text(todayTabRowLabels.displayString)
}
user_7900360

I got the same result simply by applying a scaleEffect modifier on it without having to place it in a menu.

Place .scaleEffect(1.5) on the end bracket of Picker() view or its containing Stack if you choose. You will be making the whole picker larger but it is an easy solution for cases like the question (menu style pickers).

user_195683070
Related