tvOS中AVPlayerController叠加自定义返回按钮无法点击问题

核心原因 #

tvOS基于焦点导航而非触摸交互，AVPlayerViewController的视图层级会优先抢占焦点和事件响应，SwiftUI的叠加视图（overlay/ZStack）可能无法进入焦点候选池，或被AVPlayer的底层视图拦截事件。

解决方案 #

方案1：在UIKit层级添加按钮（最可靠） #

直接在AVPlayerViewController的视图上添加UIKit按钮，确保按钮处于正确的响应链中，不受SwiftUI层级限制。

1. 自定义AVPlayerViewController子类：

import AVKit
import SwiftUI

class CustomPlayerVC: AVPlayerViewController {
    var backAction: (() -> Void)?
    
    override func viewDidLoad() {
        super.viewDidLoad()
        
        // 创建返回按钮
        let backBtn = UIButton(type: .system)
        backBtn.setTitle("返回", for: .normal)
        backBtn.titleLabel?.font = .systemFont(ofSize: 24)
        backBtn.addTarget(self, action: #selector(handleBackTap), for: .primaryActionTriggered)
        backBtn.translatesAutoresizingMaskIntoConstraints = false
        
        view.addSubview(backBtn)
        
        // 固定到左上角
        NSLayoutConstraint.activate([
            backBtn.leadingAnchor.constraint(equalTo: view.leadingAnchor, constant: 20),
            backBtn.topAnchor.constraint(equalTo: view.topAnchor, constant: 20),
            backBtn.widthAnchor.constraint(equalToConstant: 120),
            backBtn.heightAnchor.constraint(equalToConstant: 60)
        ])
        
        // 确保按钮在播放控件上层
        view.bringSubviewToFront(backBtn)
    }
    
    @objc private func handleBackTap() {
        backAction?()
    }
}

2. 封装为SwiftUI可用的View：

struct PlayerWrapper: UIViewControllerRepresentable {
    let player: AVPlayer
    let onBack: () -> Void
    
    func makeUIViewController(context: Context) -> CustomPlayerVC {
        let vc = CustomPlayerVC()
        vc.player = player
        vc.backAction = onBack
        // 可根据需求隐藏默认播放控件
        // vc.showsPlaybackControls = false
        return vc
    }
    
    func updateUIViewController(_ uiViewController: CustomPlayerVC, context: Context) {}
}

3. 在SwiftUI中使用：

struct VideoPlayerView: View {
    let videoPlayer = AVPlayer(url: URL(string: "你的视频URL")!)
    
    var body: some View {
        PlayerWrapper(player: videoPlayer) {
            // 这里写返回逻辑
            print("返回按钮触发")
        }
        .ignoresSafeArea()
    }
}

方案2：修复SwiftUI叠加按钮的焦点问题 #

如果坚持使用SwiftUI原生按钮，需要确保按钮能被焦点识别，且层级足够高：

struct VideoPlayerView: View {
    let videoPlayer = AVPlayer(url: URL(string: "你的视频URL")!)
    @State private var buttonIsFocused = false
    
    var body: some View {
        ZStack {
            // 封装AVPlayerViewController
            AVPlayerControllerRepresentable(player: videoPlayer)
                .ignoresSafeArea()
            
            Button("返回") {
                print("返回按钮触发")
            }
            .font(.title)
            .padding(.horizontal, 20)
            .padding(.vertical, 12)
            .background(Color.black.opacity(0.7))
            .cornerRadius(8)
            .position(x: 80, y: 60)
            .zIndex(1) // 确保在AVPlayer视图上层
            .focusable(true, onFocusChange: { focused in
                buttonIsFocused = focused
            })
            .preferredFocusedValue(buttonIsFocused ? true : nil) // 主动申请焦点
        }
    }
}

// 基础AVPlayer封装
struct AVPlayerControllerRepresentable: UIViewControllerRepresentable {
    let player: AVPlayer
    
    func makeUIViewController(context: Context) -> AVPlayerViewController {
        let vc = AVPlayerViewController()
        vc.player = player
        // 隐藏默认控件可提升焦点成功率
        // vc.showsPlaybackControls = false
        return vc
    }
    
    func updateUIViewController(_ uiViewController: AVPlayerViewController, context: Context) {}
}

注意：此方案在AVPlayer显示默认播放控件时可能失效，因为默认控件会抢占焦点，建议隐藏默认控件后使用。

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