如何从 SwiftUI LazyVGrid 正确地将 "cell item" 传递给 .sheet？

Question

这是我的例子，我不知道这是不是一个错误。我的所有单元格都正确加载，但是当我尝试将 DetailView() 作为 sheet 调出时，传入的项目始终是网格中最先显示的项目（在我的例子中是左上角） ), 而不是被点击的“单元格”。那么，为什么 ForEach 循环中的项目正确地填充了单元格，但没有通过按钮传递给 .sheet？

    import SwiftUI

    let columnCount: Int = 11
    let gridSpacing: CGFloat = 1

    struct GridView: View {
        
        @State var showingDetail = false
        
        let data = (1...755).map { "\([=12=])" }
        let columns: [GridItem] = Array(repeating: .init(.flexible(), spacing: gridSpacing), count: columnCount)
        let colCount: CGFloat = CGFloat(columnCount)
        var body: some View {
            GeometryReader { geo in
                ScrollView (showsIndicators: false) {
                    LazyVGrid(columns: columns, spacing: gridSpacing) {
                        ForEach(data, id: \.self) { item in
                            
                            Button(action: {
                                self.showingDetail.toggle()
                            }) {
                                GridCell(item: item, size: (geo.size.width - (colCount * gridSpacing)) / colCount)
                            }.sheet(isPresented: $showingDetail) {
                                DetailView(item: item)
                            }
                        }
                    }
                }
                .padding(.horizontal, gridSpacing)
            }
        }
    }

    struct GridCell: View {
        let isVault: Bool = false
        let item: String
        let size: CGFloat
        var body: some View {
            ZStack {
                Rectangle()
                    .fill(Color.orange)
                    .cornerRadius(4)
                Text(item)
                    .foregroundColor(.white)
                    .font(.system(size: size * 0.55))
            }
            .frame(height: size)
        }
    }

    struct DetailView: View {
        
        let item: String
        
        var body: some View {
            Text(item)
        }
    }

    struct ContentView_Previews: PreviewProvider {
        static var previews: some View {
            GridView()
                .preferredColorScheme(.dark)
        }
    }

我错过了什么？另外，在我的 iPad pro 11 上滚动有点紧张，有没有人看到同样的行为？

Answer 1

在这种用例中，使用由 item 构造的 sheet 的变体更合适，因为 sheet 必须从动态内容中移出（否则您会创建尽可能多的 sheets 作为 ForEach 中的项目）。

这是可能的解决方案。测试 Xcode 12 / iOS 14.

// helper extension because .sheet(item:...) requires item to be Identifiable
extension String: Identifiable {
    public var id: String { self }
}

struct GridView: View {

    @State private var selected: String? = nil

    let data = (1...755).map { "\([=10=])" }
    let columns: [GridItem] = Array(repeating: .init(.flexible(), spacing: gridSpacing), count: columnCount)
    let colCount: CGFloat = CGFloat(columnCount)
    var body: some View {
        GeometryReader { geo in
            ScrollView (showsIndicators: false) {
                LazyVGrid(columns: columns, spacing: gridSpacing) {
                    ForEach(data, id: \.self) { item in

                        Button(action: {
                            selected = item      // store selected item
                        }) {
                            GridCell(item: item, size: (geo.size.width - (colCount * gridSpacing)) / colCount)
                        }
                    }
                }
            }.sheet(item: $selected) { item in     // activated on selected item
                DetailView(item: item)
            }
            .padding(.horizontal, gridSpacing)
        }
    }
}

backup

如何从 SwiftUI LazyVGrid 正确地将 "cell item" 传递给 .sheet？

How do I correctly pass a "cell item" to a .sheet from a SwiftUI LazyVGrid?

scroll

popover

swiftui

geometryreader

lazyvgrid