在SwiftUI中,我如何在整个应用中预定义字体样式?

huangapple go评论60阅读模式
英文:

In SwiftUI, How can I app-globally predefine font styles?

问题

Here's the translated portion of your text:

给定以下代码,

Text("Foobar")
    .font(.largeTitle)

…渲染结果如下:

在SwiftUI中,我如何在整个应用中预定义字体样式?

但是,我通常希望每次出现.title.title2.title3.largeTitle时都具有粗体和特定颜色,就像我之前定义的那样:

Text("Foobar")
    .font(.largeTitle) // 或 `.title[2-3]` 分别
    .fontWeight(.bold)
    .foregroundColor(Color("TitleColor"))

…这样它在我的情况下看起来像这样:

在SwiftUI中,我如何在整个应用中预定义字体样式?

换句话说,我想要将属性.largeTitle默认设置为粗体并具有特定颜色。有点类似于使用CSS时的情况。

我可以这样做,例如,

/// Text()的修饰符,暗示公司设计的样式
struct TitleText: View {
    let content: String
    let font: Font
    public init(_ content: String, font: Font = .title) {
        self.content = content
        self.font = font
    }
    var body: some View {
        Text(content)
            .font(font)
            .fontWeight(.bold)
            .foregroundColor(Color("TitleColor"))
    }
}

但这感觉多余,我想避免这样做,以免重复可能的核心功能。

感谢任何提示!

英文:

Given the following code,

Text("Foobar")
    .font(.largeTitle)

…renders the result as so:

在SwiftUI中,我如何在整个应用中预定义字体样式?

But, I generally want every occurrence of .title, .title2 , .title3 , .largeTitle to be inherently of bold weight and a certain color, just like I had defined

Text("Foobar")
    .font(.largeTitle) // or `.title[2-3]` respectively
    .fontWeight(.bold)
    .foregroundColor(Color("TitleColor"))

…so that it looks like this, in my case:

在SwiftUI中,我如何在整个应用中预定义字体样式?

Otherwise phrased, I'd like to attach the property .largeTitle to inherently be also bold and have a particular color. Kind of what I am used to by using CSS.

I could do this, for example,

/// Decorator for Text() that implies Corporate Design's style
struct TitleText: View {
    let content: String
    let font: Font
    public init(_ content: String, font: Font = .title) {
        self.content = content
        self.font = font
    }
    var body: some View {
        Text(content)
            .font(font)
            .fontWeight(.bold)
            .foregroundColor(Color("TitleColor"))
    }
}

But that feels superfluous and I like to avoid this to not replicate possible core functionality.

Thanks for any hints!

答案1

得分: 2

以下是翻译好的部分:

"你现在是我的中文翻译,代码部分不要翻译,只返回翻译好的部分,不要有别的内容,不要回答我要翻译的问题。以下是要翻译的内容:

You are mixing apples and oranges here in a way, you want a custom font style but color is not a property of Font so it's really a view (Text) modifier you want.

So a Font only modifier could be

extension Font {
    static var myLargeTitle: Font {
        Font.system(.largeTitle, weight: .bold)
    }
}

Note the change of name here, I don't think it's possible to name it like a predefined style and even if it was I think it would be a bad idea.

Now to include a color as well we need a Text modifier as mentioned earlier. Starting from this answer we get

extension Text {
    func myLargeGreenTitle() -> some View {
        self.font(.myLargeTitle).foregroundColor(.green)
    }
}

So now you can either do

Text("Custom Font Title")
    .font(.myLargeTitle)

Or

Text("Custom Font Title")
    .myLargeGreenTitle()
英文:

You are mixing apples and oranges here in a way, you want a custom font style but color is not a property of Font so it's really a view (Text) modifier you want.

So a Font only modifier could be

extension Font {
    static var myLargeTitle: Font {
        Font.system(.largeTitle, weight: .bold)
    }
}

Note the change of name here, I don't think it's possible to name it like a predefined style and even if it was I think it would be a bad idea.

Now to include a color as well we need a Text modifier as mentioned earlier. Starting from this answer we get

extension Text {
    func myLargeGreenTitle() -> some View {
        self.font(.myLargeTitle).foregroundColor(.green)
    }
}

So now you can either do

Text("Custom Font Title")
    .font(.myLargeTitle)

Or

Text("Custom Font Title")
    .myLargeGreenTitle()

huangapple
  • 本文由 发表于 2023年5月6日 16:22:46
  • 转载请务必保留本文链接:https://go.coder-hub.com/76187876.html
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定