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

Question

需要使用 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")


                        }


                    }



            }

        }
    }
}

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

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

不要忘记将 info对象替换为您的 info ，将YourObjectView替换为您的customView。

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

}

纵向布局：

景观布局：