Can I fix this big difference between swiftui preview and actual watch widget layout?

Hi,

working on customising my live activity Smart Stack layout for ios18.

A thing that is very frustrating is that I consistently looks different for me in the Xcode preview and on the actual watch.

See attached screenshots below. The sizes are different, and italic doesn't work on the watch, for example.

It makes it time-consuming and unpredictable, so I was wondering if this is a known issue or if I'm doing something wrong, and also can I do anything?

thanks

edit: this is the layout:

var body: some View {
    VStack(alignment: .center, spacing:4) {
        HStack(alignment: .center) {
            IconView(resource: "n-compact-w", bgColor: Color.checkedIn, padding: 2, paddingRight: 6, paddingBottom: 6)
                .frame(maxWidth: 25, maxHeight: 25).aspectRatio(1, contentMode: .fit)
            Text("Checked Out")
                .font(.title3).bold()
        }
        Text(status.loc)
            .font(.headline)
            .multilineTextAlignment(.center)
        Text(FormatUtils.getFormattedDateTime(status.time)).font(.subheadline)
            .multilineTextAlignment(.center).italic()
    }
}

Answered by Frameworks Engineer in 808878022

This is an issue in watchOS 11.0. It was fixed in 11.1 beta 2. Relevant release note:

WidgetKit

Resolved Issues

Fixed: Rectangular complications and Watch-specific custom Live Activity views use the wrong font metrics, causing title2 and title3 to render much larger than intended and largeTitle to render much smaller than intended. Additionally, custom Live Activity views use the wrong default font (SF Pro instead of SF Compact). (135831317)

https://developer.apple.com/documentation/watchos-release-notes/watchos-11_1-release-notes/

Try using a more appropriate font size and .multilineTextAlignment(.left) to see what the title looks like.

Hey thanks for responding. Yeah sure I know what to do to try and fix it, my question was more about why it looks so different :)

Accepted Answer

This is an issue in watchOS 11.0. It was fixed in 11.1 beta 2. Relevant release note:

WidgetKit

Resolved Issues

Fixed: Rectangular complications and Watch-specific custom Live Activity views use the wrong font metrics, causing title2 and title3 to render much larger than intended and largeTitle to render much smaller than intended. Additionally, custom Live Activity views use the wrong default font (SF Pro instead of SF Compact). (135831317)

https://developer.apple.com/documentation/watchos-release-notes/watchos-11_1-release-notes/

Thank you so much, Frameworks Engineer! :)

Can I fix this big difference between swiftui preview and actual watch widget layout?
 
 
Q