SwiftUI how to Reorder in Landscape and Portrait - swiftui

Question

we use a custom gridView to display all Products in a grid.
the problem is... we need to reorder if the Device is in Landscape or Portait.
How can we do that?
ModularGridStyle(columns: 2, rows: 3)
columns and rows needs to be different if device is in landscape.
here is the View
var body: some View {
Grid(self.products) { product in
Text("\(product.name)")
}
.gridStyle(
ModularGridStyle(columns: 2, rows: 3)
)
}

Answer 1

I would use verticalSizeClass.
#Environment(\.verticalSizeClass) private var verticalSizeClass: UserInterfaceSizeClass?
var body: some View {
Grid(self.products) { Text(verbatim: "\($0.name)") }
.gridStyle(
ModularGridStyle(
columns: self.verticalSizeClass == .compact ? 3 : 2,
rows: self.verticalSizeClass == .compact ? 2 : 3
)
)
}
}

Answer 2

I personally prefer using a GeometryReader to setup different views for portrait/landscape. Of course, it's a bit redundant, but usually you have other properties that change as well:
var body: some View {
GeometryReader() { g in
if g.size.width < g.size.height {
// view in portrait mode
Grid(self.products) { product in
Text("\(product.name)")
}
.gridStyle(
ModularGridStyle(columns: 2, rows: 3)
)
} else {
// view in landscape mode
Grid(self.products) { product in
Text("\(product.name)")
}
.gridStyle(
ModularGridStyle(columns: 3, rows: 2)
)
}
}
}

Answer 3

Here is possible approach:
private var deviceOrientationPublisher = NotificationCenter.default.publisher(for:
UIDevice.orientationDidChangeNotification)
#State var dimention: (Int, Int) = (2, 3)
var body: some View {
Grid(self.products) { product in
Text("\(product.name)")
}
.gridStyle(
ModularGridStyle(columns: dimention.0, rows: dimention.1)
)
.onReceive(deviceOrientationPublisher) { _ in
self.dimention = UIDevice.current.orientation.isLandscape ? (3, 2) : (2, 3)
}
}

Answer 4

I looked for a more simple & elegant solution -
and found this code in - hackingwithswift
// Our custom view modifier to track rotation and
// call our action
struct DeviceRotationViewModifier: ViewModifier {
let action: (UIDeviceOrientation) -> Void
func body(content: Content) -> some View {
content
.onAppear()
.onReceive(NotificationCenter.default.publisher(for: UIDevice.orientationDidChangeNotification)) { _ in
action(UIDevice.current.orientation)
}
}
}
// A View wrapper to make the modifier easier to use
extension View {
func onRotate(perform action: #escaping (UIDeviceOrientation) -> Void) -> some View {
self.modifier(DeviceRotationViewModifier(action: action))
}
}
// An example view to demonstrate the solution
struct ContentView: View {
#State private var orientation = UIDeviceOrientation.unknown
var body: some View {
Group {
if orientation.isPortrait {
Text("Portrait")
} else if orientation.isLandscape {
Text("Landscape")
} else if orientation.isFlat {
Text("Flat")
} else {
Text("Unknown")
}
}
.onRotate { newOrientation in
orientation = newOrientation
}
}
}