SwiftUI

Question

我在 ScrollView 中有一个 LazyVStack，它位于较小视图（图中的黄色视图）下方。

问题是当网格向上滚动时，单元格仍然可以通过我真的不想要的黄色视图接收点击。我想在该视图中搜索 TextField，但触摸会混淆，用户体验一团糟。在示例代码中，我添加了一个按钮以交换到 List 以检查是否存在相同的滚动问题。它没有。

import SwiftUI

struct ContentView: View {
    
    @State private var useList = false
    @State private var gridLayout: [GridItem] = [GridItem(.flexible()), GridItem(.flexible()), GridItem(.flexible())]
    
    var data = (0...249).map { "\([=10=])" }
    
    var body: some View {
        NavigationView {
            VStack {
                TopInfoPane()
                if useList {
                    List(data, id: \.self) { item in
                        NavigationLink(destination: Text(item)) {
                            Text(item)
                        }
                    }
                } else {
                    ScrollView {
                        LazyVGrid(columns: gridLayout, alignment: .center, spacing: 8) {
                            ForEach(data, id: \.self) { item in
                                NavigationLink(destination: Text(item)) {
                                    Cell(item: item)
                                }
                            }
                        }
                    }
                }
            }.navigationBarTitle("Scroller")
            .navigationBarItems(trailing: Button(action: { useList.toggle() }) { Text("Swap") })
        }
    }
}

struct Cell: View {
    var item: String
    var body: some View {
        Text(item)
            .frame(minWidth: 0, maxWidth: .infinity, minHeight: 75)
            .background(Color.green)
    }
}

struct TopInfoPane: View {
    var body: some View {
        Text("TopInfoPane")
            .frame(height: 48)
            .frame(minWidth: 0, maxWidth: .infinity)
            .background(Color.yellow)
    }
}

我试过将视图上的动画设置为 nil 并设置 .allowsHitTesting(false) 但它们没有帮助。我很茫然，因为我真的没想到 ScrollView 会滚动到它自己的框架之外。

Answer 1

尝试如下裁剪ScrollView

ScrollView {
    LazyVGrid(columns: gridLayout, alignment: .center, spacing: 8) {
        ForEach(data, id: \.self) { item in
            NavigationLink(destination: Text(item)) {
                Cell(item: item)
            }
        }
    }
}
.contentShape(Rectangle())
.clipped()

SwiftUI - 如何停止 ScrollView 在其他视图后面接收点击

SwiftUI - How to stop ScrollView receiving taps behind other view

touch

scrollview

ios

swift