SwiftUI中TabView与UIViewRepresentable组合的选中状态异常问题

问题背景 #

• 基于MobileVLCKit + UIViewRepresentable实现自定义视频播放器VLCItemView
• 使用TabView实现分页滑动布局，每页以网格展示4个视频项
• 需求：点击视频项时，显示红色边框标识选中状态

问题表现 #

• 当TabView应用.tabViewStyle(PageTabViewStyle())时，点击视频无法触发选中边框显示
• 不应用该样式时，选中边框正常显示，但分页滑动功能失效

已尝试无效方案 #

• 将VLCItemView替换为Rectangle，PageTabViewStyle下点击功能恢复正常
• 尝试用background、ZStack替代overlay实现边框，问题依旧

解决方案 #

方案1：使用highPriorityGesture提升点击手势优先级 #

PageTabViewStyle的分页滚动手势会和子视图的点击手势产生冲突，导致点击事件被滚动视图拦截。通过给视频项添加highPriorityGesture，让点击手势优先响应：

struct VideoItemView: View {
    let video: VideoModel // 替换为你的视频数据模型
    @Binding var selectedVideo: VideoModel?
    
    var body: some View {
        VLCItemView(url: video.playURL)
            .overlay(
                RoundedRectangle(cornerRadius: 8)
                    .stroke(selectedVideo == video ? .red : .clear, lineWidth: 2)
            )
            // 用highPriorityGesture确保点击手势优先被处理
            .highPriorityGesture(
                TapGesture()
                    .onEnded {
                        selectedVideo = video
                    }
            )
    }
}

方案2：检查UIViewRepresentable的交互设置 #

确保自定义播放器视图没有拦截点击事件，在VLCItemView的实现中确认用户交互开启：

struct VLCItemView: UIViewRepresentable {
    let url: URL
    
    func makeUIView(context: Context) -> VLCMediaPlayerView {
        let playerView = VLCMediaPlayerView()
        let media = VLCMedia(url: url)
        let player = VLCMediaPlayer(media: media)
        playerView.mediaPlayer = player
        player.play()
        
        // 必须开启用户交互，否则SwiftUI手势无法响应
        playerView.isUserInteractionEnabled = true
        return playerView
    }
    
    func updateUIView(_ uiView: VLCMediaPlayerView, context: Context) {}
}

方案3：给播放器视图添加透明遮罩（备选） #

如果上述方案无效，可以在VLCItemView上层添加一个透明的可点击视图，确保点击事件被SwiftUI捕获：

struct VideoItemView: View {
    let video: VideoModel
    @Binding var selectedVideo: VideoModel?
    
    var body: some View {
        ZStack {
            VLCItemView(url: video.playURL)
            // 透明遮罩层，用于接收点击事件
            Color.clear
                .contentShape(Rectangle())
                .onTapGesture {
                    selectedVideo = video
                }
        }
        .overlay(
            RoundedRectangle(cornerRadius: 8)
                .stroke(selectedVideo == video ? .red : .clear, lineWidth: 2)
        )
    }
}

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