如何在SwiftUI中创建网格

我知道我们可以像这样在垂直快捷界面中创建一个列表

struct ContentView : View {
    var body: some View {
        NavigationView {
            List {
                Text("Hello")
            }
        }
    }
}

---

但是，有没有什么方法可以像我们在

UICollectionView

中那样，将列表拆分为2个或3个或更多跨度，覆盖整个屏幕，您可以这样创建自定义视图以实现UICollectionView行为：-

struct ContentView : View {
    var body: some View {
        VStack(alignment: .leading, spacing: 10) {
            ScrollView(showsHorizontalIndicator: true) {
                HStack {
                    ForEach(0...10) {_ in
                        GridView()
                    }
                }
            }
            List {
                ForEach(0...5) {_ in
                    ListView()
                }
            }
            Spacer()
        }
    }
}

struct ListView : View {
    var body: some View {
        Text(/*@START_MENU_TOKEN@*/"Hello World!"/*@END_MENU_TOKEN@*/)
        .color(.red)
    }
}

struct GridView : View {
    var body: some View {
        VStack(alignment: .leading, spacing: 10) {
            Image("marker")
                .renderingMode(.original)
                .cornerRadius(5)
                .frame(height: 200)
                .border(Color.red)
            Text("test")
        }
    }
}

---

基于ZStack的示例

---

适用于Xcode 12上的iOS/iPadOS 14。您可以使用LazyVGrid将用户看到的内容加载到屏幕中，而不是整个列表，list默认情况下是惰性的

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

不要忘记用您的信息替换信息对象，用您的自定义视图替换对象视图 您可以使用两个新的本机

视图

s：

LazyHGrid

LazyVGrid

使用代码或直接从库中获取：

---

该库包含一个完全可用的示例代码，您可以自己测试。

它是否支持可恢复性

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