Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

SwiftUI header font

Tags:

swift

swiftui

I'm trying to find a good way to get the system font for a List's header. Here's what I mean:

struct ContentView: View {
    var body: some View {
        List {
            Section(header: Text("Test")) {
                Text("Blablabla")
            }
        }
    }
}

enter image description here

Basically, is there a way to programmatically get the font for the text in the image that says "Test", so I can use it elsewhere in a Text object for example?

I'm font of the trying to make a collapsible header by using DisclosureGroup, however the font of the DisclosureGroup is different from the font of the Section.

like image 279
ICantThinkOfAUsername Avatar asked Jul 08 '21 20:07

ICantThinkOfAUsername


People also ask

What is the default SwiftUI font?

SwiftUI lets you customize Text by applying a . font() modifier. The default iOS font is called San Francisco and if you don't explicitly change it, then all of your text will have the default iOS look. Some other options of standard fonts include: title, headline, subheadline, body, callout, caption or footnote.

How do I change the font in SwiftUI?

Hold the command key and click the text to bring up a pop-over menu. Choose Show SwiftUI Inspector and then you can edit the text/font properties.

How do I set dynamic font size in SwiftUI?

SwiftUI comes with support for all of Dynamic Type's font sizes, all set using the . font() modifier. However, if you ask for a specific font and size, you'll find your text no longer scales up or down automatically according to the user's Dynamic Type settings – it remains fixed.


1 Answers

For single use:

Section(header: Text("Test").font(.title)) {
    Text("Blablabla")
}

For multiple use:

First, Create a struct:

struct CustomFont: View {
    var body: some View {
        Text("Test")
           .font(.title)
    }
 }

Second, Call the instance of the struct to use it.

Section(header: CustomFont()) {
    Text("Blablabla")
}
like image 130
Aashish Avatar answered Oct 03 '22 13:10

Aashish