button - 为什么将 View 放在 Button 中会导致 LazyVGrid 严重滞后(错误？)？

Question

这是我的代码。没有按钮，但使用 onTapGesture，滚动非常流畅。伟大的!但是如果我将 Text() View 放在按钮中，那么延迟真的非常糟糕，甚至有点悬......

这是简化的代码。在我的实际项目中，我有一个名为 GridCell 的 View ，它本质上是一个带有字符串的彩色框。但是，如果我将该 View 放在按钮中(而不是在 ForEach 中使用按钮并以 GridCell 作为其内容/标签)，那么也会出现滞后。我们应该避免使用 LazyVGrids 中的按钮还是这是某种错误？

    import SwiftUI

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

    struct SimpleGridView: View {
        
        @State private var selected: String? = nil
        
        let data = (1...1000).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
                            
                            // This code creates lag when scrolling
                            
//                                                    Button(action: {
//                                                        selected = item
//                                                    }) {
//                                                        Text(item)
//                                                    }
                            
                            /// This code is fine, apparently.
                            Text(item)
                                .onTapGesture(count: 1, perform: {
                                    selected = item
                                })
                        }
                    }
                    .sheet(item: $selected) { item in     // activated on selected item
                        DetailView(item: item)
                    }
                    .padding(.horizontal)
                }
            }
        }
    }

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

Answer 1

这看起来像是 SwiftUI 的限制。我遇到了同样的问题，并且找到了解决方法。我尝试使用时间分析器调查根本问题是什么，但我的调查最终发现似乎是 SwiftUI 中的缓存问题。 HVGrid.lengthAndSpacing 使用了 40% 的计算时间来访问缓存。根据其名称，我认为 VGrid 在内部使用它来计算每行大小，但由于某种原因，它不能很好地与按钮配合使用。

我尝试在叠加层中使用该按钮。这样，单个“单元格”的大小是根据 View 计算的，然后按钮从 View 中获取其大小。看来有效。

所以代码将如下所示:

ForEach(data, id: \.self) { item in
    Text(item) // This is the UI of the cell.
        .overlay {
            Button {
                print("Button pressed")
                selected = item
            } label: {
                Color.clear
            }
    }
}