Does SwiftUI support alternate layouts by preferred font size?

Question

Ideally, an iOS app uses font sizes that follow the user's system-wide font size setting. The topic is covered in a WWDC talk from 2017 called Building Apps with Dynamic Type.

In simple cases, you set a UIView's font using named styles like body, caption1, title, which vary in size depending on the user's settings.

In trickier cases, you need to write different auto-layout constraints for different font sizes. For example, horizontally stacked labels may need to become vertically stacked when the font is larger.

For this situation, the WWDC talk shows some code like this:

if traitCollection.preferredContentSizeCategory > .extraExtraLarge {
    NSLayoutConstraint.deactivate( horizontalConstraints )
    NSLayoutConstraint.activate( verticalConstraints )
} else {
    NSLayoutConstraint.deactivate( verticalConstraints )
    NSLayoutConstraint.activate( horizontalConstraints )
}

What is the equivalent to this in SwiftUI?

Answer 1

The closest I can think of would be something like that:

struct ContentView: View {

    @Environment(\.sizeCategory) var sizeCategory: ContentSizeCategory

    let largeSizeCategories: [ContentSizeCategory] = [.extraExtraLarge,
                                                      .extraExtraExtraLarge,
                                                      .accessibilityMedium,
                                                      .accessibilityLarge,
                                                      .accessibilityExtraLarge,
                                                      .accessibilityExtraExtraLarge,
                                                      .accessibilityExtraExtraExtraLarge]

    var body: some View {
        Group {
            if largeSizeCategories.contains(sizeCategory) {
                VStack {
                    Text("Pizza, bananas, donuts")
                    Text("Io, Europa, Ganymede")
                }
            } else {
                HStack {
                    Text("Pizza, bananas, donuts")
                    Text("Io, Europa, Ganymede")
                }
            }
        }
    }

}

Get the ContentSizeCategory from the Environment and adjust your view depending on the value.