Как мне правильно передать «элемент ячейки» в .sheet из SwiftUI LazyVGrid? - PullRequest
Новая
       97

Как мне правильно передать «элемент ячейки» в .sheet из SwiftUI LazyVGrid?

1 голос
/ 02 августа 2020

Вот мой пример, и я не могу сказать, ошибка это или нет. Все мои ячейки загружаются правильно, но когда я пытаюсь вывести DetailView() в виде листа, вставленный элемент всегда отображается первым в сетке (в моем случае в верхнем левом углу), а НЕ ячейкой "это было прослушано. Итак, почему элемент из ForEach l oop правильно заполняет ячейки, но не передается в .sheet с помощью кнопки? 

    import SwiftUI

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

    struct GridView: View {
        
        @State var showingDetail = false
        
        let data = (1...755).map { "\($0)" }
        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 немного резкая, есть ли у кого-нибудь такое же поведение?

1 Ответ

1 голос
/ 02 августа 2020

В таком случае использования более целесообразно использовать вариант листа, созданного с элементом, потому что лист должен быть перемещен из динамического c содержимого (в противном случае вы создаете столько листов, сколько элементов в 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 { "\($0)" }
    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)
        }
    }
}
...