SwiftUI 如何在横向和纵向中重新排序

Posted 2023-02-24

【中文标题】SwiftUI 如何在横向和纵向中重新排序

【英文标题】：SwiftUI how to Reorder in Landscape and Portrait

【发布时间】：2019-12-16 01:43:19

【问题描述】：

我们使用自定义 gridView 在网格中显示所有产品。 问题是……如果设备是横向或纵向，我们需要重新排序。

我们该怎么做？

ModularGridStyle(columns: 2, rows: 3)

如果设备是横向的，列和行需要不同。

这里是视图

var body: some View 
Grid(self.products)  product in
                    Text("\(product.name)")

                
                .gridStyle(
                    ModularGridStyle(columns: 2, rows: 3)
                )

【问题讨论】：

这能回答你的问题吗？ SwiftUI Repaint View Components on Device Rotation

【参考方案1】：

我会使用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
            )
        )
    

【参考方案2】：

我个人更喜欢使用 GeometryReader 为纵向/横向设置不同的视图。当然，这有点多余，但通常你还有其他属性也会发生变化：

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)
            )
        
    

【参考方案3】：

这是可能的方法：

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)