skip to Main Content

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

4

Answers


  1. 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)
    }
    
    Login or Signup to reply.
  2. 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)
    
    Login or Signup to reply.
  3. 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)
    }
    
    Login or Signup to reply.
  4. 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).

    Login or Signup to reply.
Please signup or login to give your own answer.
Back To Top
Search