Scaled Metric 在 Apple Watch 上不起作用？

如何解决Scaled Metric 在 Apple Watch 上不起作用？

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

    @ScaledMetric var widthScale: CGFloat = 1

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

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

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

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

解决方法

使用下面的代码发现它确实有效。原则上，在模拟器和我的手表上。还是要弄清楚为什么上面的问题不起作用。

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 的不同缩放因子。

,

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

1. @ScaledMetric 应该在它所应用的 View 中定义，而不是在其他地方的 struct Type 中定义。
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)
    }
}