我在LazyVStack
内有一个ScrollView
,它位于一个较小的视图(图像中的黄色视图)下方。
问题在于,当向上滚动网格时,单元格仍然可以通过黄色视图接收水龙头,这是我真正不想要的。我想在该视图中进行搜索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 { "\($0)" }
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
仍然会滚动超出其自己的框架。
答案 0 :(得分:2)
尝试如下裁剪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()