SwiftUI中ScrollView内点击卡片UI冻结：手势系统门超时问题

我正在使用SwiftUI实现一个闪卡信息流，通过ScrollView承载闪卡，期望实现垂直滑动切换下一张卡片、点击卡片翻转的功能。

我编写了VisualFeedView包含ScrollView，内部通过LazyVStack加载卡片：

import Foundation
import SwiftUI

struct VisualFeedView: View {
    
    @State private var showingAudioFeed = false
    @StateObject private var viewModel = VisualFeedViewModel()
    
    var body: some View {
        ZStack {
            Color.gliteBackground().ignoresSafeArea()
            ScrollView {
                LazyVStack(spacing: 0) {
                    ForEach(viewModel.currentCards) { card in
                        TwoSidedCardView(content: card)
                            .containerRelativeFrame([.horizontal, .vertical])
                    }
                }
            }
            .scrollTargetBehavior(.paging)
            .ignoresSafeArea()
            .scrollIndicators(.never)
            .onAppear() {
                viewModel.refreshFeed()
            }
            VStack {
                HStack {
                    Spacer()
                    Button {
                        showingAudioFeed.toggle()
                    } label: {
                        ZStack {
                            Circle()
                                .fill(Color(.sRGB, white: 0, opacity: 0.6))
                                .frame(width: 52, height: 52)
                            Image("HeadphonesLargeIcon")
                        }
                        
                    }
                    .sheet(isPresented: $showingAudioFeed) {
                        AudioFeedView()
                    }
                    .padding(.trailing, 24.0)
                }
                .padding(.top)
            Spacer()
            }
        }
    }
}

struct VisualFeedView_Previews: PreviewProvider {
    static var previews: some View {
        VisualFeedView()
    }
}

闪卡视图TwoSidedCardView实现如下：

import Foundation
import SwiftUI

enum TwoSidedCardViewState {
    case front
    case back
}

struct TwoSidedCardView: View {
    var content: TwoSidedCardContent
    @State private var frontSide = true

    var body: some View {
        Group {
            if frontSide {
                CardFrontSideView(content: content)
            } else {
                CardBackSideView(content: content)
            }
        }
        .clipped()
        .onTapGesture {
            withAnimation {
                frontSide.toggle()
            }
        }
    }
}

struct TwoSidedCardView_Previews: PreviewProvider {
    
    static var previews: some View {
        ZStack {
            Color.gliteBackground().ignoresSafeArea()
        }
    }
}

目前遇到问题：有时点击卡片会导致整个UI冻结；有时滚动功能正常，但点击卡片仍会冻结；控制台有时会输出提示“Gesture: System gesture gate timed out.”。

请问我哪里出错了？该如何调试这个功能？

问题根源 #

1. 手势冲突：使用scrollTargetBehavior(.paging)的ScrollView和卡片的onTapGesture区域完全重叠，系统无法快速区分点击与滚动起始动作，触发手势判断超时（即控制台提示的“System gesture gate timed out”），进而阻塞UI。
2. 视图切换布局异常：用Group包裹前后视图切换时，缺乏稳定的布局上下文，加上clipped()可能引发布局计算异常，极端情况导致主线程阻塞。

修复步骤 #

1. 解决手势冲突

给卡片的点击手势设置优先级，确保优先被识别：

// 修改TwoSidedCardView的手势部分
.clipped()
.highPriorityGesture(
    TapGesture()
        .onEnded {
            withAnimation(.easeInOut(duration: 0.3)) {
                frontSide.toggle()
            }
        }
)

或给卡片添加垂直内边距，减少手势重叠范围：

// 在VisualFeedView的LazyVStack中调整卡片布局
TwoSidedCardView(content: card)
    .containerRelativeFrame([.horizontal, .vertical])
    .padding(.vertical, 8)

2. 优化卡片切换动画与布局

用ZStack替代Group实现更稳定的视图切换，如需3D翻转效果可添加rotation3DEffect：

struct TwoSidedCardView: View {
    var content: TwoSidedCardContent
    @State private var frontSide = true

    var body: some View {
        ZStack {
            CardFrontSideView(content: content)
                .rotation3DEffect(.degrees(frontSide ? 0 : 180), axis: (0, 1, 0))
            CardBackSideView(content: content)
                .rotation3DEffect(.degrees(frontSide ? 180 : 0), axis: (0, 1, 0))
        }
        .clipped()
        .highPriorityGesture(
            TapGesture()
                .onEnded {
                    withAnimation(.easeInOut(duration: 0.3)) {
                        frontSide.toggle()
                    }
                }
        )
    }
}

调试方法 #

• 主线程阻塞排查：打开Xcode的Debug Navigator（快捷键Cmd+7），UI冻结时查看主线程调用栈，确认是手势处理还是布局计算导致阻塞。
• 简化视图测试：将CardFrontSideView和CardBackSideView替换为简单的Color或文本视图，排查子视图复杂布局是否引发问题。
• 日志定位：在onTapGesture闭包中添加日志，确认手势是否触发、视图切换是否完成：

  print("Tap triggered")
  withAnimation {
      frontSide.toggle()
      print("Toggle completed: \(frontSide)")
  }
  

• 禁用动画测试：暂时注释withAnimation，判断是否是动画引发的布局循环。

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