Scaled Metric 在 Apple Watch 上不起作用？

Question

我正在尝试针对 Apple Watch 执行此操作：

    @ScaledMetric var widthScale: CGFloat = 1

然后将 widthScale 应用到一些 SwiftUI View 元素的框架上：

    .frame(width: myFrame.width * widthScale, height: myHeight)

只是它根本没有改变。字体大小确实会发生变化，但 widthScale 始终保持 @ 1.0。

我理解错了吗？我发现错误了吗？它不应该在 WatchOS 上使用吗？

Answer 1

所以我通过反复试验发现了什么：

1. @ScaledMetric 应该在它所应用的视图中定义，而不是在其他地方的结构类型中。
2. @ScaledMetric 值四舍五入到整个像素。因此，根据显示密度 x2 或 x3，它会四舍五入为 1/2halfs 或 1/3rds。 使用此视图和预览来查看不同的比例：

import SwiftUI

struct ScaledMetricText: View {
    @ScaledMetric(relativeTo: .caption) var widthScaleHundred: CGFloat = 100.0
    @ScaledMetric(relativeTo: .caption) var widthScaleTen: CGFloat = 10.0
    @ScaledMetric(relativeTo: .caption) var widthScaleOne: CGFloat = 1.0
    var body: some View {
        VStack {
            Text("Unscaled")
                .fixedSize(horizontal: true, vertical: false)
                .frame(width: 100)
                .background(Color(.lightGray))
                .padding(3)
            Text("100 -> \(widthScaleHundred)")
                .fixedSize(horizontal: true, vertical: false)
                .frame(width: 100 * widthScaleHundred / 100)
                .background(Color(.lightGray))
            Text("10 -> \(widthScaleTen)")
                .fixedSize(horizontal: true, vertical: false)
                .frame(width: 100 * widthScaleTen / 10)
                .background(Color(.lightGray))
                .padding(3)
            Text("1 -> \(widthScaleOne)")
                .fixedSize(horizontal: true, vertical: false)
                .frame(width: 100 * widthScaleOne)
                .background(Color(.lightGray))
        }
        .font(.caption)
    }
}

struct ScaledMetricText_Previews: PreviewProvider {
    static var previews: some View {
        ScaledMetricText()
            .previewDevice(PreviewDevice(rawValue: "Apple Watch Series 6 - 40mm"))
            .environment(\.sizeCategory, ContentSizeCategory.small)
        ScaledMetricText()
            .previewDevice(PreviewDevice(rawValue: "Apple Watch Series 3 - 38mm"))
            .environment(\.sizeCategory, ContentSizeCategory.extraExtraExtraLarge)
        ScaledMetricText()
            .previewDevice(PreviewDevice(rawValue: "Apple Watch Series 6 - 44mm"))
            .environment(\.sizeCategory, ContentSizeCategory.small)
        ScaledMetricText()
            .previewDevice(PreviewDevice(rawValue: "Apple Watch Series 3 - 42mm"))
            .environment(\.sizeCategory, ContentSizeCategory.extraExtraExtraLarge)

    }
}

或 iOS 预览：

struct ScaledMetricText_Previews: PreviewProvider {
    static var previews: some View {
        ScaledMetricText()
            .previewDevice(PreviewDevice(rawValue: "iPhone 8"))
            .environment(\.sizeCategory, ContentSizeCategory.small)
        ScaledMetricText()
            .previewDevice(PreviewDevice(rawValue: "iPhone 8"))
            .environment(\.sizeCategory, ContentSizeCategory.extraExtraExtraLarge)
        ScaledMetricText()
            .previewDevice(PreviewDevice(rawValue: "iPhone 12 Pro Max"))
            .environment(\.sizeCategory, ContentSizeCategory.small)
        ScaledMetricText()
            .previewDevice(PreviewDevice(rawValue: "iPhone 12 Pro Max"))
            .environment(\.sizeCategory, ContentSizeCategory.extraExtraExtraLarge)
    }
}

Answer 2

通过下面的代码发现它确实有效。原则上，在模拟器和我的手表上。还是得搞清楚为什么上面的问题不行。

struct TextLabelsView: View {
    var body: some View {
        ScrollView(.vertical) {
            DynamicResizingView()
        }
    }
}

struct DynamicResizingView: View {
    @ScaledMetric(relativeTo: .largeTitle) var scaledLargeTitle: CGFloat = 10
    @ScaledMetric(relativeTo: .title) var scaledTitle: CGFloat = 10
    @ScaledMetric(relativeTo: .headline) var scaledHeadline: CGFloat = 10
    @ScaledMetric(relativeTo: .subheadline) var scaledSubheadline: CGFloat = 10
    @ScaledMetric(relativeTo: .body) var scaledBody: CGFloat = 10
    @ScaledMetric(relativeTo: .callout) var scaledCallout: CGFloat = 10
    @ScaledMetric(relativeTo: .caption) var scaledCaption: CGFloat = 10
    @ScaledMetric(relativeTo: .footnote) var scaledFootnote: CGFloat = 10
    @ScaledMetric() var scaledNothing: CGFloat = 10

    var body: some View {
        VStack(alignment: .leading) {
            Text("Dynamic Base10").font(Font.system(size:10))
            ScaledText(label: "LargeTitle", size: scaledLargeTitle)
            ScaledText(label: "Title", size: scaledTitle)
            ScaledText(label: "Headline", size: scaledHeadline)
            ScaledText(label: "Subheadline", size: scaledSubheadline)
            ScaledText(label: "Body", size: scaledBody)
            ScaledText(label: "Callout", size: scaledCallout)
            ScaledText(label: "Caption", size: scaledCaption)
            ScaledText(label: "Footnote", size: scaledFootnote)
            ScaledText(label: "Not Specified", size: scaledNothing)
        }
    }
}

struct ScaledText: View {
    var label: String
    var size: CGFloat
    var body: some View {
        Text("Scaled by \(label) to \(size, specifier: "%.2f")")
            .font(Font.system(size: size))
    }
}

struct TextLabelsView_Previews: PreviewProvider {
    static var previews: some View {
        TextLabelsView()
            .environment(\.sizeCategory, ContentSizeCategory.accessibilityExtraExtraExtraLarge)
        TextLabelsView()
            .environment(\.sizeCategory, ContentSizeCategory.small)
    }
}

通过这个，您可以看到不同 Font.TextStyle|s 的不同比例因子。