How to Change NSTextField Font Size When Used in SwiftUI

Question

Below is a demo app with a simple NSTextField in a Mac app. For some reason, the font size won't change no matter what I try.

import Cocoa
import SwiftUI

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

struct ContentView: View {
  @State private var text = "Text goes here..."
  var body: some View {
    FancyTextField(text: $text)
      .padding(50)
  }
}

struct FancyTextField: NSViewRepresentable {
  @Binding var text: String
  func makeNSView(context: Context) -> NSTextField {
    let textField = NSTextField()
    textField.font = NSFont.systemFont(ofSize: 30) //<- Not working
    return textField
  }
  func updateNSView(_ nsView: NSTextField, context: Context) {
    nsView.stringValue = text
  }
}

That's the whole app. I'm not doing anything else in this simple example. I can change the text color and other attributes, but for some reason the font size doesn't change.

On a whim, I tried changing it on the SwiftUI side as well, but I didn't expect that to work (and it doesn't):

FancyTextField(text: $text)
  .font(.system(size: 20))

Any ideas?

score 1 · Accepted Answer · answered Feb 12 '21 at 02:59

This is a particularly weird one:

struct FancyTextField: NSViewRepresentable {
  @Binding var text: String
  func makeNSView(context: Context) -> NSTextField {
    let textField = MyNSTextField()
    textField.customSetFont(font: .systemFont(ofSize: 50))
    return textField
  }
  func updateNSView(_ nsView: NSTextField, context: Context) {
    nsView.stringValue = text
  }
}

class MyNSTextField : NSTextField {
    func customSetFont(font: NSFont?) {
        super.font = font
    }
    
    override var font: NSFont? {
        get {
            return super.font
        }
        set {}
    }
}

Maybe someone will come up with a cleaner solution to this, but you're right -- the normal methods for just setting .font on the NSTextField do not seem to work here. It seems to be because outside elements (the debugger doesn't give me a good hint) are trying to set the font to system font size 13.

So, my solution is to subclass NSTextField and make the setter for font not responsive. Then, I define a custom setter method, so the only way to get up to the real setter is through my custom method.

A little hacky, but it works.

This is excellent, thank you very much! I would have never thought to create a custom setter like that. My guess is that when the `NSTextField` gets passed to SwiftUI, it must inherit some properties. I'll file a bug with Apple. Thanks again! — Clifton Labrum, Feb 12 '21 at 05:07
It is possible that there's a more elegant solution, but I think I went through at the least, the common options. This one seems pretty workable for now, and easy to remove if the scenario changes. Glad it works for you! — jnpdx, Feb 12 '21 at 05:08

How to Change NSTextField Font Size When Used in SwiftUI

1 Answers1