SwiftUI中ListView/ScrollView结合ForEach时VideoPlayer无法播放

问题场景 #

在SwiftUI中，将VideoPlayer放入ForEach（嵌套在ScrollView或List中）时，视频无法正常播放；但直接在ScrollView中放置VideoPlayer却能正常运行。

问题代码分析 #

原问题代码存在两个核心问题：

1. 重复的onAppear回调：自定义子视图中定义了两个onAppear，第一个先调用player.play()（此时player是初始化的空实例），第二个才创建并赋值新的AVPlayer，导致新实例从未被触发播放。
2. @State的生命周期限制：@State变量在ForEach的视图复用机制下，可能出现状态重置或复用，导致player实例管理混乱。

修复方案 #

方案一：用ObservableObject管理Player生命周期 #

通过ObservableObject封装player的创建、播放逻辑，配合@StateObject确保每个子视图的player实例独立且生命周期稳定。

import SwiftUI
import AVKit

// 封装Player管理逻辑，集中控制播放/暂停
class VideoPlayerManager: ObservableObject {
    let player: AVPlayer
    
    init(url: URL) {
        self.player = AVPlayer(url: url)
    }
    
    func play() {
        player.play()
    }
    
    func pause() {
        player.pause()
    }
}

struct Content2: View {
    // 提前定义视频URL，避免重复创建
    private let videoURL = URL(string: "https://sample-videos.com/video123/mp4/720/big_buck_bunny_720p_30mb.mp4")!
    
    var body: some View {
        ScrollView {
            ForEach(0..<3) { _ in
                VideoPlayerView(url: videoURL)
                    .frame(height: 300)
                    .padding(.bottom, 16)
            }
        }
    }
}

struct VideoPlayerView: View {
    let url: URL
    @StateObject private var playerManager: VideoPlayerManager
    
    // 初始化时直接创建PlayerManager，确保player实例正确关联URL
    init(url: URL) {
        self.url = url
        self._playerManager = StateObject(wrappedValue: VideoPlayerManager(url: url))
    }
    
    var body: some View {
        VideoPlayer(player: playerManager.player)
            .onAppear {
                playerManager.play()
            }
            .onDisappear {
                playerManager.pause()
            }
    }
}

方案二：调整视图渲染逻辑，确保Player创建后再播放 #

通过条件渲染，先等待player实例创建完成，再显示VideoPlayer并触发播放。

import SwiftUI
import AVKit

struct Content2: View {
    var body: some View {
        ScrollView {
            ForEach(0..<1) { _ in
                VideoView()
            }
        }
    }
}

struct VideoView: View {
    @State private var player: AVPlayer?
    
    var body: some View {
        // 先判断player是否存在，不存在时显示加载占位
        if let player = player {
            VideoPlayer(player: player)
                .frame(height: 300)
                .onAppear {
                    player.play()
                }
                .onDisappear {
                    player.pause()
                }
        } else {
            ProgressView("加载中...")
                .frame(height: 300)
                .onAppear {
                    if let url = URL(string: "https://sample-videos.com/video123/mp4/720/big_buck_bunny_720p_30mb.mp4") {
                        self.player = AVPlayer(url: url)
                    }
                }
        }
    }
}

修复说明 #

• 方案一通过ObservableObject和@StateObject，让player实例的生命周期与子视图绑定，避免ForEach复用视图时的状态混乱，同时集中管理播放逻辑，代码更易维护。
• 方案二通过条件渲染，确保只有当player实例创建完成后，才显示VideoPlayer并调用播放，避免了空player的无效播放调用。

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