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

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