iOS 14

Question

我知道我们可以像这样在垂直SwiftUI中创建一个列表，

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

但是有什么方法可以将列表分成2个或3个或更多个跨度，就像我们在UICollectionView中所做的那样覆盖整个屏幕。

Answer 1

基于ZStack的示例here

Grid(0...100) { _ in
    Rectangle()
        .foregroundColor(.blue)
}

Answer 2

适用于Xcode 12上的 iOS / iPadOS 14 。您可以使用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)
                 }
             }
         }
    }
}

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

Answer 3

iOS 14

您可以使用2个新的本机View：

LazyHGrid
LazyVGrid

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

：

该库包含一个可以正常运行的示例代码，您可以对其进行测试。

Answer 4

您可以像这样创建customView来实现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")
        }
    }
}

如何在SwiftUI中创建网格

4 个答案:

iOS 14