ios - SwiftUI Horizo​​ntal ScrollView onTapGesture 在它后面的垂直滚动视图上注册点击

Question

当我从垂直滚动视图（ForEach）滚动项目并点击水平视图中的项目时，我在 VStack 中有一个水平滚动视图（ForEach）和垂直滚动视图（ForEach），然后执行来自水平视图的点击手势而不是来自垂直的点击手势看法。

这是我的代码：

//
//  TestView.swift
//  iOS
//
//

import SwiftUI

struct TestView: View {
    @State var searchTerm = ""
    
    
    var body: some View {
        VStack {
            TextField("Search",text: $searchTerm)
                .padding()
                .background(
                    RoundedRectangle(cornerRadius:15).fill(Color.yellow)
                )
                .padding()
            ScrollView(.horizontal){
                HStack{
                    ForEach(1..<100){ index in
                        VStack {
                            Image(systemName: "swift")
                                .resizable()
                                .scaledToFit()
                                .padding()
                                .frame(width: 100, height: 100, alignment: .center)
                                .background(Color.gray)
                                .clipShape(Circle())
                            Text("item \(index)")
                        }
                        .onTapGesture{
                            print("horizontal list item tapped")
                        }
                        
                    }
                    
                }
                
            }
            
            
            ScrollView {
                VStack {
                    ForEach(1..<100) { index in
                        HStack {
                            Image(systemName: "swift")
                                .resizable()
                                .scaledToFit()
                                .frame(width: 50, height: 50, alignment: .center)
                            Text("vertical list item : \(index)")
                            Spacer()
                        }
                        .contentShape(Rectangle())
                        .onTapGesture{
                            print("vertical list item \(index) tapped")
                        }
                        
                    }
                    .padding(.all,5)
                    .background(
                        RoundedRectangle(cornerRadius:15).fill(Color.gray)
                    )
                    .padding(.all,5)
                    
                }
            }
            
        }
        .animation(.easeIn(duration: 10))
    }
    
}

struct TestView_Previews: PreviewProvider {
    static var previews: some View {
        TestView()
    }
}

滚动前 滚动 后

仅供参考：用列表代替垂直滚动视图修复了点击手势，但我想要滚动视图，因为我想使用 ScrollViewReader 滚动垂直列表项作为下一步

标签： iosswiftuiscrollview

Answer 1

解决方案是为两个滚动视图添加剪辑的内容形状，例如

ScrollView(.horizontal){
     // .. content here
}.contentShape(Rectangle())
.clipped()

ScrollView {
     // .. content here
}.contentShape(Rectangle())
.clipped()

使用 Xcode 12 / iOS 14 测试