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

Posted 2023-02-24

【中文标题】Swift UI - 如何制作图像网格？

【英文标题】：Swift UI - How to make Image Grids?

【发布时间】：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 正在使用许多“尚未准备好迎接黄金时段，测试版较少”的功能。

【参考方案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 中应该有某种“网格系统”来处理这种情况？

关于这个的另一个帖子：***.com/questions/56466306/…

@AlexandreLordelo 如果horizontalSizeClass == .regular && verticalSizeClass == .regular，您可以为 iPad 提供定制布局？