SwiftUI中未点击CourseCard2却触发选中，Instructors按钮无法点击

问题场景 #

我实现了CourseCard2 SwiftUI组件，在NavigationStack的滚动视图中使用时，顶部的"Instructors"按钮点击完全无效——每次点击都会触发第一个CourseCard2的点击事件。已经通过添加背景色确认卡片没有超出视觉范围，但问题仍然存在。

组件和使用代码如下：

CourseCard2核心代码 #

VStack(spacing: 0) {
    imageSection
    detailsSection
}
.buttonStyle(PlainButtonStyle())
.background(
    RoundedRectangle(cornerRadius: 16)
        .fill(Color(.systemBackground))
        .shadow(
            color: Color.black.opacity(0.08),
            radius: 12,
            x: 0,
            y: 4
        )
)
.padding(.horizontal)
.onTapGesture {
    showSheet = true
}
// 其余组件实现代码...

页面使用代码 #

NavigationStack{
    ScrollView {
        ScrollView(.horizontal){
            Button(action: {
                showSheet = true
            }) {
                HStack {
                    Text("Instructors")
                        .fontWeight(.bold) 
                    Image(systemName: "arrow.down") 
                }
                .foregroundColor(.orange) 
                .padding(.horizontal, 16) 
                .padding(.vertical, 8)
                .background(
                    Capsule()
                        .fill(Color.blue.opacity(0.2)) 
                )
            }
            .zIndex(1000)
        }
        .frame(maxHeight: 50)
        .padding(.bottom, 15)
        .padding(.leading, 15)
        
        VStack{
            ForEach(filterText){ course in
                let image = images[course.image_ref] ?? Image("noImage")
                CoursesCard2(name: course.Name, image: image, youtubeLinks: course.youtube_videos, description: course.Description, instructors: course.instructors, labels: course.labels, isFree: course.isfree, ispro: ispro)
                    .task {
                        await loadImage(for: course.image_ref)
                    }
            }
        }
    }
    .searchable(text: $searchText, prompt: "Search for courses")
    .navigationTitle("Browse Courses")
    .sheet(isPresented: $showSheet){
        AuthorCategorySelection()
            .presentationDetents([.medium])
    }
}

问题原因 #

1. 手势优先级问题：即使给按钮加了zIndex(1000)，SwiftUI的手势识别逻辑中，下层视图的.onTapGesture可能仍然会先响应——zIndex主要影响视觉层级，不完全等同于事件响应优先级。
2. 布局重叠隐患：CourseCard2本身添加了.padding(.horizontal)，导致其可点击区域（手势响应范围）横向扩展，可能覆盖到按钮所在的区域，即使视觉上看不到。
3. 嵌套ScrollView的事件传递：外层ScrollView和内层横向ScrollView的组合，可能导致事件传递路径出现异常，使得按钮的点击被下层卡片拦截。

解决方案 #

方案1：提升按钮手势优先级 #

给按钮添加highPriorityGesture，强制让按钮的点击事件优先被处理：

Button(action: {
    showSheet = true
}) {
    // 按钮原有内容不变
}
.zIndex(1000)
.highPriorityGesture(TapGesture().onEnded {
    showSheet = true
})

这个方法直接修改手势优先级，确保按钮的点击不会被下层视图拦截。

方案2：调整布局层级为ZStack #

将按钮和卡片列表放入ZStack中，明确按钮在视觉和事件响应上都处于上层：

NavigationStack{
    ScrollView {
        ZStack(alignment: .topLeading) {
            // 卡片列表放在下层
            VStack{
                ForEach(filterText){ course in
                    // 卡片代码不变
                }
            }
            
            // 按钮放在上层
            ScrollView(.horizontal){
                // 按钮原有内容不变
            }
            .frame(maxHeight: 50)
            .padding(.bottom, 15)
            .padding(.leading, 15)
        }
    }
    // 其余修饰符不变
}

通过ZStack的层级关系，彻底避免按钮和卡片的事件区域重叠问题。

方案3：调整卡片的padding位置 #

把CourseCard2的.padding(.horizontal)从卡片组件内部移到父容器的VStack上，缩小卡片的可点击区域：

// 修改页面中的VStack部分
VStack{
    ForEach(filterText){ course in
        // 移除卡片内部的.padding(.horizontal)
        CoursesCard2(name: course.Name, image: image, youtubeLinks: course.youtube_videos, description: course.Description, instructors: course.instructors, labels: course.labels, isFree: course.isfree, ispro: ispro)
            .task {
                await loadImage(for: course.image_ref)
            }
    }
}
.padding(.horizontal) // 将padding移到这里

这样卡片的可点击区域不会横向扩展，避免覆盖按钮的点击范围。

内容的提问来源于stack exchange，提问作者ooooooo