swiftui - Scaled Metric not working on Apple Watch?

Question

I'm trying to do this targeting Apple Watch:

    @ScaledMetric var widthScale: CGFloat = 1

and then apply the widthScale to the frame of some SwiftUI View elements:

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

Only it doesn't change at all. Font Sizes do change all around but the widthScale always stays @ 1.0.

Did I get the idea wrong? Did I find a bug? Is it not supposed to be used on WatchOS?

Answer 1

With the code below found that it does work. In principle, in Simulator and on my Watch. Still have to figure out why the problem above won't work.

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)
    }
}

With this you can see the different scaling factors for the different Font.TextStyle|s.