SwiftUI TabView中VideoPlayer返回前视频画面冻结问题排查

问题原因 #

• 渲染链路断裂：TabView的.page模式下，滑出屏幕的视图会被从视图层级中移除，对应的VideoPlayer组件销毁后，AVPlayer的画面渲染关联会丢失。当你滑回之前的页面时，新创建的VideoPlayer虽然绑定了同一个AVPlayer实例，但播放器的画面渲染链路没重新建立，导致播放器后台在运行（控制面板显示播放），但画面无法更新。
• 未关联视图可见性与播放状态：没有在视图出现/消失时管理AVPlayer的播放状态，滑走的视频继续播放，滑回来时也没触发画面重新渲染。
• ForEach的id选择不当：直接用AVPlayer.self作为标识，SwiftUI对引用类型的id判断可能不稳定，容易导致视图重建时出现异常。

修复方案 #

1. 自定义模型管理播放状态 #

创建ObservableObject类封装每个视频的播放器实例、播放状态，确保状态变更能被SwiftUI及时捕获。

2. 绑定视图生命周期与播放状态 #

用onAppear/onDisappear和页面切换监听，严格控制播放器的暂停/继续，避免后台播放和渲染异常。

3. 使用稳定的视图标识 #

用UUID作为每个视频的唯一id，替代引用类型的AVPlayer，确保ForEach能正确识别视图。

修改后的代码 #

import SwiftUI
import AVKit

// 自定义视频模型，统一管理播放状态
class VideoPlayerModel: ObservableObject {
    let id = UUID()
    let player: AVPlayer
    @Published var isPlaying = false
    
    init(url: URL) {
        self.player = AVPlayer(url: url)
        // 监听播放器状态，同步到isPlaying
        let statusObserver = player.observe(\.timeControlStatus) { [weak self] player, _ in
            guard let self = self else { return }
            self.isPlaying = player.timeControlStatus == .playing
        }
        // 保存观察者防止被提前释放
        objc_setAssociatedObject(player, "\(self.id)", statusObserver, .OBJC_ASSOCIATION_RETAIN_NONATOMIC)
    }
    
    func play() {
        player.play()
        isPlaying = true
    }
    
    func pause() {
        player.pause()
        isPlaying = false
    }
}

struct ContentView: View {
    @State private var videoModels: [VideoPlayerModel] = [
        VideoPlayerModel(url: URL(string: "https://test-videos.co.uk/vids/bigbuckbunny/mp4/h264/1080/Big_Buck_Bunny_1080_10s_1MB.mp4")!),
        VideoPlayerModel(url: URL(string: "https://edisciplinas.usp.br/pluginfile.php/5196097/mod_resource/content/1/Teste.mp4")!)
    ]
    // 记录当前选中的页面索引
    @State private var currentIndex = 0
    
    var body: some View {
        TabView(selection: $currentIndex) {
            ForEach(videoModels, id: \.id) { model in
                VStack {
                    VideoPlayer(player: model.player)
                        .frame(width: 400, height: 300)
                        .clipped()
                }
                .tag(model.id)
                .onAppear {
                    // 视图出现时，恢复之前的播放状态
                    if model.isPlaying {
                        model.play()
                    }
                }
                .onDisappear {
                    // 视图消失时暂停播放
                    model.pause()
                }
            }
        }
        .tabViewStyle(.page(indexDisplayMode: .never))
        .indexViewStyle(.page(backgroundDisplayMode: .interactive))
        .onChange(of: currentIndex) { oldIndex, newIndex in
            // 切换页面时，暂停上一个视频，播放当前视频
            videoModels[oldIndex].pause()
            videoModels[newIndex].play()
        }
    }
}

struct ContentView_Previews: PreviewProvider {
    static var previews: some View {
        ContentView()
    }
}

代码说明 #

• VideoPlayerModel封装了播放器实例和播放状态，通过ObservableObject让SwiftUI感知状态变化，同时监听播放器的原生状态同步到自定义属性。
• 用onAppear/onDisappear和页面切换回调，确保只有当前可见的视频在播放，避免后台浪费资源，同时保证视图重建时画面能正常渲染。
• 用UUID作为视图标识，彻底解决引用类型id不稳定导致的视图异常问题。

内容的提问来源于stack exchange，提问作者Олег Мосейко