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

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

Answer 2

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

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

当设备为portrait时，将其设置为.regular，否则它将返回.compact。

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

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

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

}

肖像布局：

风景布局：

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

2 个答案: