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.
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!")
}
}
}
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!")
}
}
}
Parameter | Type | Default | Notes |
---|---|---|---|
horizontalAlignment |
HorizontalAlignment |
.center |
Horizontal alignment passed to underlying VStack when alignment is portrait. |
verticalAlignment |
VerticalAlignment |
.center |
Vertical alignment passed to underlying HStack when alignment is landscape. |
spacing |
CGFloat? |
nil |
Spacing to pass to the underlying VStack or HStack . |
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!")
}
}
}
Parameter | Type | Default | Notes |
---|---|---|---|
alignment |
FlexAlignment |
NA | A universal alignment that is translated/passed to underlying VStack when alignment is portrait or HStack when alignment is landscape. |
spacing |
CGFloat? |
nil |
Spacing to pass to the underlying VStack or HStack . |
Thanks to kcochibili for suggesting the addition of alignment and spacing!