SwiftUI中父视图含onTapGesture时AVPlayer可操作的实现方案

问题描述 #

我有一组包含AVPlayer的单元格，父视图的onTapGesture会在点击时触发全屏展示，但这导致无法直接操作AVPlayer的播放/暂停/快进/快退功能。尝试给AVPlayer添加.allowsHitTesting(false)没有效果，请问如何在保留父视图点击手势的同时，让用户正常操作AVPlayer？

原简化代码：

struct ContentView: View {
    var body: some View {
        ForEach(0...4, id: \.self) { _ in
            PlayerView()
                .onTapGesture {
                    // Present full screen
                }
        }
    }
}

struct PlayerView: View {
    var body: some View {
        VideoPlayer(player: AVPlayer(url: URL(string: "https://camendesign.com/code/video_for_everybody/test.html")!))
    }
}

解决方案 #

核心思路是让AVPlayer区域优先响应自身的交互手势，父视图的全屏点击仅在空白区域触发，以下是两种可行方案：

方案一：ZStack分层隔离手势 #

通过分层布局，将全屏点击手势限制在空白背景区域，AVPlayer置于上层优先响应自身交互：

struct ContentView: View {
    var body: some View {
        ForEach(0...4, id: \.self) { _ in
            ZStack {
                // 背景透明视图，仅响应空白区域点击
                Color.clear
                    .onTapGesture {
                        // 触发全屏展示逻辑
                    }
                // AVPlayer视图置于上层，优先捕获自身区域的交互
                PlayerView()
            }
        }
    }
}

struct PlayerView: View {
    var body: some View {
        VideoPlayer(player: AVPlayer(url: URL(string: "https://camendesign.com/code/video_for_everybody/test.html")!))
            // 显式声明允许点击（默认已开启，可省略）
            .allowsHitTesting(true)
    }
}

方案二：手势优先级控制 #

如果不想调整视图结构，可通过highPriorityGesture提升AVPlayer的手势优先级，确保它的交互优先于父视图：

struct PlayerView: View {
    var body: some View {
        VideoPlayer(player: AVPlayer(url: URL(string: "https://camendesign.com/code/video_for_everybody/test.html")!))
            // 让VideoPlayer的手势优先级高于父视图
            .highPriorityGesture(TapGesture(), including: .all)
    }
}

原理说明 #

• 方案一中，底层的透明视图仅响应空白区域点击，AVPlayer上层视图会优先处理自身的播放控制手势，两者互不干扰。
• 方案二中，highPriorityGesture强制让VideoPlayer的手势优先级高于父视图的onTapGesture，点击AVPlayer区域时不会触发全屏逻辑，点击其他区域则正常触发。
• 之前尝试的.allowsHitTesting(false)是错误方向，因为我们需要保留AVPlayer的交互能力，而非禁用它。

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