在SwiftUI中可以使用带有自定义字体的动态类型大小吗?

mbx*_*Dev 5 user-interface fonts swift swiftui

我正在玩SwiftUI,并且想为我的项目使用自定义UI字体。但是,我不想失去内置字体类(例如,大标题)附带的动态类型调整大小。

苹果确实为以下产品提供了自定义字体修饰符Text

Text("Hello, world!")
    .font(.custom("Papyrus", size: 17))
Run Code Online (Sandbox Code Playgroud)

但是,这将大小固定为17pt。当您在设备上或模拟器中运行此命令并打开辅助功能检查器以调整操作系统级别的字体大小时,该Text元素不会更新。

size:参数不是可选的,因此您必须传递一些内容。不幸的size是,由于Font没有size参数,因此您无法获得现有字体(甚至是自定义字体)。

在SwiftUI的其余部分中,一种常见的模式似乎是参数可以是可选的,也可以传入nil以显式禁用某些行为。我希望size:参数on .custom()是可选的,并且在内部使用上一个Font修饰符的大小,或者使用通过设置的默认大小Text

另外,定义系统样式的静态方法(例如.largeTitle)可以接受提供自定义字体名称的参数:.largeTitle("Papyrus")

有人有解决方法吗?

Xti*_* D. 12

我还通过ViewModifier. 我从Hacking With Swift关于动态类型和自定义字体的这篇文章中借用了 base 修饰符。结果如下:

import SwiftUI

@available(iOS 13, macCatalyst 13, tvOS 13, watchOS 6, *)
struct CustomFont: ViewModifier {
    @Environment(\.sizeCategory) var sizeCategory

    var name: String
    var style: UIFont.TextStyle
    var weight: Font.Weight = .regular

    func body(content: Content) -> some View {
        return content.font(Font.custom(
            name,
            size: UIFont.preferredFont(forTextStyle: style).pointSize)
            .weight(weight))
    }
}

@available(iOS 13, macCatalyst 13, tvOS 13, watchOS 6, *)
extension View {
    func customFont(
        name: String,
        style: UIFont.TextStyle,
        weight: Font.Weight = .regular) -> some View {
        return self.modifier(CustomFont(name: name, style: style, weight: weight))
    }
}
Run Code Online (Sandbox Code Playgroud)

和用法:

Text("Hello World!")
    .customFont(name: "Georgia", style: .headline, weight: .bold)
Run Code Online (Sandbox Code Playgroud)

通过这种方式,您可以坚持使用捆绑的文本样式,而无需明确提供大小。如果您想这样做,font修饰符已经允许我们这样做,并且可以通过针对此问题提供的替代方法之一来处理缩放。

另外,请注意,因为样式是应用在一个ViewModifier一致的 中struct,它反过来响应环境的变化sizeCategory,视图将在切换回您的应用程序时反映无障碍设置的变化;所以没有必要重新启动它。


kon*_*iki 9

我要做的方法是创建一个可绑定到环境大小类别更改的自定义修饰符:

每当您需要使用Papyrus时,都可以像这样使用它:

Text("Hello World!").modifier(Papyrus())
Run Code Online (Sandbox Code Playgroud)

或像这样:

Text("Hello World!").modifier(Papyrus(.caption))
Text("Hello World!").modifier(Papyrus(.footnote))
Text("Hello World!").modifier(Papyrus(.subheadline))
Text("Hello World!").modifier(Papyrus(.callout))
Text("Hello World!").modifier(Papyrus())
Text("Hello World!").modifier(Papyrus(.body))
Text("Hello World!").modifier(Papyrus(.headline))
Text("Hello World!").modifier(Papyrus(.title))
Text("Hello World!").modifier(Papyrus(.largeTitle))
Run Code Online (Sandbox Code Playgroud)

现在,您的文本将动态更改,无需进一步工作。这是相同的代码,对不同的文本大小首选项有反应:

在此处输入图片说明

您的Papyrus()实现将类似于以下内容。您需要为每个类别找出正确的值,这只是一个示例:

struct Papyrus: ViewModifier {
    @Environment(\.sizeCategory) var sizeCategory
    var textStyle: Font.TextStyle

    init(_ textStyle: Font.TextStyle = .body) {
        self.textStyle = textStyle
    }

    func body(content: Content) -> some View {
        content.font(getFont())
    }

    func getFont() -> Font {
        switch(sizeCategory) {
        case .extraSmall:
            return Font.custom("Papyrus", size: 16 * getStyleFactor())
        case .small:
            return Font.custom("Papyrus", size: 21 * getStyleFactor())
        case .medium:
            return Font.custom("Papyrus", size: 24 * getStyleFactor())
        case .large:
            return Font.custom("Papyrus", size: 28 * getStyleFactor())
        case .extraLarge:
            return Font.custom("Papyrus", size: 32 * getStyleFactor())
        case .extraExtraLarge:
            return Font.custom("Papyrus", size: 36 * getStyleFactor())
        case .extraExtraExtraLarge:
            return Font.custom("Papyrus", size: 40 * getStyleFactor())
        case .accessibilityMedium:
            return Font.custom("Papyrus", size: 48 * getStyleFactor())
        case .accessibilityLarge:
            return Font.custom("Papyrus", size: 52 * getStyleFactor())
        case .accessibilityExtraLarge:
            return Font.custom("Papyrus", size: 60 * getStyleFactor())
        case .accessibilityExtraExtraLarge:
            return Font.custom("Papyrus", size: 66 * getStyleFactor())
        case .accessibilityExtraExtraExtraLarge:
            return Font.custom("Papyrus", size: 72 * getStyleFactor())
        @unknown default:
            return Font.custom("Papyrus", size: 36 * getStyleFactor())
        }
    }

    func getStyleFactor() -> CGFloat {
        switch textStyle {
        case .caption:
            return 0.6
        case .footnote:
            return 0.7
        case .subheadline:
            return 0.8
        case .callout:
            return 0.9
        case .body:
            return 1.0
        case .headline:
            return 1.2
        case .title:
            return 1.5
        case .largeTitle:
            return 2.0
        @unknown default:
            return 1.0
        }
    }

}
Run Code Online (Sandbox Code Playgroud)

更新

我修改了实现以接受文本样式作为参数。

  • 您可以使用 UIFontMetrics 来避免打开 sizeCategory。您需要编写一个从 Font.TextStyle 到 UIFont.TextStyle 的转换器,但这非常简单。 (2认同)