RotatableStack

• RotatableStack
  • Basic Usage
  • Alignment and Spacing

A SwiftUI view that embeds in a VStack when in portrait orientation and HStack in landscape orientation. It wraps your content in a GeometryReader to determine if the device is in landscape or portrait rotation (or on larger devices, if it's generally wider or narrower). If portrait, it wraps the content in a VStack, else it wraps in an HStack for landscape.

Basic Usage

Use RotatableStack in place of a VStack or HStack where you want the layout to change based on the geometry of your device:

struct MyView: View {

    var body: some View {
        RotatableStack {
            Spacer()
            Text("Hello, World!")
        }
    }
}

Alignment and Spacing

You can also pass parameters down to the underlying VStack or HStack, including alignment and spacing.

struct MyView: View {

    var body: some View {
        RotatableStack(
            horizontalAlignment: .leading,
            verticalAlignment: .top,
            spacing: 16
        ) {
            Spacer()
            Text("Hello, World!")
        }
    }
}

You pass both alignment types since one will be used for portrait and the other for landscape.

If you want to make this a bit easier, this package provides a FlexAlignment enum that works almost exactly the same as HorizontalAlignment, but will work in both orientations. In landscape, the top is "leading" and the bottom is "trailing". This is just a shortcut if you want to keep alignment consistent in either orientation.

struct MyView: View {

    var body: some View {
        RotatableStack(
            alignment: .leading,
            spacing: 16
        ) {
            Spacer()
            Text("Hello, World!")
        }
    }
}

Thanks to kcochibili for suggesting the addition of alignment and spacing!