[SwiftUI] Not able to customize font size on label of MenuBarExtra

Question

Created Mar ’23

Replies 2

Boosts 0

Participants 3

SF Symbols and font size not working on MenuBarExtra's label. Below is the demo code:

import SwiftUI

@main
struct MyApp: App {
  var body: some Scene {
    MenuBarExtra {
    } label: {
      Image(systemName: "11.square")
        .imageScale(.large)

      Text("11:22")
        .font(.system(size: 60))
    }
    .menuBarExtraStyle(.window)
  }
}

As you can see in the screenshot, apparently, none of the imageScale() or font() work.

Screenshot 2023-03-15 at 23.19.53.png

Is this expected?

Boost

Answer 1

MobileTen OP

Mar ’23

Because you can't. This something is managed by the user directly and the OS.

0

Answer 2

randomolddude OP

Mar ’23

I ran into the same issue. I found a workaround that I don't like but does work for what I want to do. I save the Text that I want into a View variable and render it into a cgImage and use that for the Label. I couldn't use ImageRenderer in the "label:" block, it gave an obscure error. Here is an edited excerpt from the code I used. You might have to play with padding and/or Spacer() to make it fit properly on the status bar. Hopefully you find it useful.

var body: some Scene {
    MenuBarExtra() {
         Text("...")
      } label: {
        updateTitleImage(titleText: title!)
     }
    .menuBarExtraStyle(.window)
}

struct updateTitleImage: View {
    var titleText: String
    
    var body: some View {
        
        &#x2F;&#x2F; I used a font that&#039;s twice as large as what I want and then use a scale of 2 to make the text look smoother
        let title = Text(titleText).font(Font.custom("Monaco", size: 16.0)).foregroundColor(Color.white).padding(.bottom)

        let renderer = ImageRenderer(content: title)
        let cgImage = renderer.cgImage
        Image(cgImage!, scale: 2, label: Text(""))
    }
}

1