Swift UI - 如何制作图像网格？答案

【问题标题】：Swift UI - How to make Image Grids?Swift UI - 如何制作图像网格？
【发布时间】：2019-06-14 18:07:15
【问题描述】：

需要使用 SwiftUI 创建图像网格，根据屏幕宽度动态更改行。

当我使用List时，我只能得到一列..

我尝试使用 Hstacks 制作 2 列，但它不适用于屏幕宽度动态。

例如：iPhone 肖像应该有 1 列例如：iPhone 横向应该有 2 列

import SwiftUI

struct ProductGrid : View {
    var body: some View {

        List(0 ..< 5) { item in

            VStack() {
                Image("product")
                HStack {

                   ProfileImageSmall()
                        VStack {
                            Text("Product")

                            Text("Username")


                        }


                    }



            }

        }
    }
}

如何制作列数适应屏幕宽度的网格？

【问题讨论】：

现在，你不能。也就是说，除非您使用 UIKit - 老实说，我不知道那里是否有可能。
你能张贴你想要达到的目标的草图吗？
@dfd 如果他追求的是照片应用程序所做的事情，显然这是可能的。
照片是否使用 SwiftUI？ “在 UIViewRepresentable 中包装 UIKit 视图”的解决方案可能是目前唯一的答案，但它并不是一个好的答案。
这就是为什么我发表了一个相当模糊的评论。使用HStack 和VStack，即使是List 也不会这样做。同样，正如@matt 指出的那样，iOS 13 Photos 的限制是什么？它使用 SwiftUI 吗？ UIKit？我的最佳猜测是如果新的照片应用程序（真的还没有在 iOS 13 中使用它）处理所需的内容并且不是 iOS 12 的一部分，那么它很可能使用 SwiftUI。但是......这是 SwiftUI beta 1 中可用的东西吗？我很确定 Apple 正在使用许多“尚未准备好迎接黄金时段，测试版较少”的功能。

标签： swift swiftui

【解决方案1】：

适用于 XCode 12

import SwiftUI

//MARK: - Adaptive
struct ContentView: View {
    
    var body: some View {
        ScrollView {
            LazyVGrid(columns: [GridItem(.adaptive(minimum:100))]) {
                ForEach(yourObjects) { object in
                    YourObjectView(item: object)
                }
            }
        }
    }
}

//MARK: - Custom Columns
struct ContentView: View {
        
    var body: some View {
         ScrollView {   
             LazyVGrid(columns: Array(repeating: GridItem(), count: 4)) {
                 ForEach(yourObjects) { object in
                     YourObjectView(item: object)
                 }
             }
         }
    }
}

不要忘记将信息 objects 替换为您的信息，并将 YourObjectView 替换为您的 customView。

【讨论】：

【解决方案2】：

您可以使用尺寸类来确定正确的界面方向。

要检查iPhone是否为横向，您可以检查垂直尺寸类环境值。

设备为portrait时，设置为.regular，否则返回.compact。

您可以使用@Environment 属性包装器订阅该环境值，并在发生更改时让视图重绘自身。

在此示例中，当 iPhone 处于 portrait 模式时，我会显示一个大的绿色方块，而当 iPhone 处于 landscape 模式时，会显示两个较小的方块（一个绿色，一个粉红色）。

struct ContentView: View {

    @Environment(\.verticalSizeClass) var verticalSizeClass: UserInterfaceSizeClass?

    var body: some View {
        GeometryReader { geometry in
            ScrollView {
                ForEach(1...24) { item in
                    if self.verticalSizeClass == .regular {
                        HStack {
                            Spacer(minLength: geometry.size.width * 0.15)
                            Rectangle()
                                .foregroundColor(.green)
                                .frame(width: geometry.size.width * 0.70,
                                       height: geometry.size.height * 0.3)
                            Spacer(minLength: geometry.size.width * 0.15)
                        }
                    } else {
                        HStack {
                            Spacer(minLength: geometry.size.width * 0.05)
                            Rectangle()
                                .foregroundColor(.green)
                                .frame(width: geometry.size.width * 0.40,
                                       height: geometry.size.height)
                            Spacer(minLength: geometry.size.width * 0.05)
                            Rectangle()
                                .foregroundColor(.pink)
                                .frame(width: geometry.size.width * 0.40,
                                       height: geometry.size.height)
                            Spacer(minLength: geometry.size.width * 0.05)
                        }
                    }
                }
            }
        }
    }

}

纵向布局：

横向布局：

【讨论】：

"界面旋转时环境水平尺寸类改变"不在iPad上。
再次感谢马特奥！但不幸的是，正如@matt 提到的，这不适用于 iPad。 SwiftUI 中应该有某种“网格系统”来处理这种情况？
关于这个的另一个帖子：stackoverflow.com/questions/56466306/…
@AlexandreLordelo 如果horizontalSizeClass == .regular && verticalSizeClass == .regular，您可以为 iPad 提供定制布局？