使用TabView实现Instagram Reels时滚动追加内容的异常问题

我用带独立AVPlayer的TabView实现了Instagram Reels风格的视图，模拟无限滚动向初始列表添加元素时出现异常——播放ID为98的Reel并追加新内容后，当前播放的视频会闪烁，同时前一个视频的音频开始播放，看起来TabView没有正确重渲染。

问题代码 #

ReelsView #

GeometryReader { geo in
    TabView(selection: $currentReel) {
        ForEach(0..<items.count, id: \.self) { i in
            let reelModel = items[i]
            ReelPlayerView(reel: reelModel.reel, videoPlayerModel: reelModel.videoPlayerModel, width: geo.size.width, height: geo.size.height)
                .frame(width: geo.size.width)
                .rotationEffect(.init(degrees: 270))
                .ignoresSafeArea(.all, edges: .top)
                .tag(i)
                .id(i)
        }
    }
    .id(items.count)
    .rotationEffect(.init(degrees: 90))
    .frame(width: geo.size.height)
    .tabViewStyle(.page(indexDisplayMode: .never))
    .indexViewStyle(.page(backgroundDisplayMode: .never))
    .frame(maxWidth: geo.size.width)
    .onChange(of: currentReel) { value in
        for i in items.indices {
            if i == value {
                items[i].videoPlayerModel.play()
            } else {
                items[i].videoPlayerModel.stop()
            }
        }
        
        if (currentReel == Int(items.count - 1)) {
            self.items.append(contentsOf: self.items) // 此处追加新内容，滚动到列表末尾时触发
        }
    }
    .onAppear() {
        if items[currentReel].videoPlayerModel.player != nil {
            items[currentReel].videoPlayerModel.play()
        }
    }
    .onDisappear() {
        items[currentReel].videoPlayerModel.pause()
    }
}
.ignoresSafeArea(.all, edges: .top)

ReelPlayerView #

CustomVideoPlayer(hls: reel.video_url!) { videoPlayer in
    DispatchQueue.main.async {
        videoPlayerModel.player = videoPlayer
    }
}
.frame(width: width, height: height)

更新：尝试移除.id(items.count)后，出现了附件视频所示的新异常效果。

问题根源分析 #

1. 错误的视图标识策略：用索引作为ForEach的id和TabView的tag，列表追加元素后索引会被复用，SwiftUI的Diffing机制无法区分新旧视图，导致视图复用错误，引发音频串流。
2. 强制TabView重建：.id(items.count)会在每次追加内容时强制TabView完全重建，直接打乱当前播放状态，造成视频闪烁。
3. 不合理的无限滚动触发时机：滚动到列表最后一个元素才追加内容，且直接重复现有数据，容易引发视图混乱。

修复方案 #

1. 给数据模型添加唯一标识符 #

给你的Reel数据模型添加全局唯一ID（比如后端返回的ID或本地生成的UUID），让模型实现Identifiable协议：

struct ReelWrapper: Identifiable {
    let id: String // 用后端返回的Reel ID，或者 UUID()
    let reel: Reel
    let videoPlayerModel: VideoPlayerModel
}

2. 重构TabView的ForEach和Selection #

用模型的唯一ID替代索引，让SwiftUI能正确追踪每个视图：

// 把currentReel的类型改成对应ID的类型，比如String
@State private var currentReel: String = items.first?.id ?? ""

GeometryReader { geo in
    TabView(selection: $currentReel) {
        ForEach(items) { item in
            ReelPlayerView(reel: item.reel, videoPlayerModel: item.videoPlayerModel, width: geo.size.width, height: geo.size.height)
                .frame(width: geo.size.width)
                .rotationEffect(.init(degrees: 270))
                .ignoresSafeArea(.all, edges: .top)
                .tag(item.id) // 用模型唯一ID作为tag
        }
    }
    // 移除.id(items.count)，禁止强制重建TabView
    .rotationEffect(.init(degrees: 90))
    .frame(width: geo.size.height)
    .tabViewStyle(.page(indexDisplayMode: .never))
    .indexViewStyle(.page(backgroundDisplayMode: .never))
    .frame(maxWidth: geo.size.width)
    ...
}

3. 优化播放状态管理 #

不要遍历所有元素来控制播放，只针对上一个和当前播放的实例操作，减少不必要的状态变更：

@State private var lastPlayedId: String?

.onChange(of: currentReel) { newId in
    // 暂停上一个播放的视频
    if let lastId = lastPlayedId,
       let lastItem = items.first(where: { $0.id == lastId }) {
        lastItem.videoPlayerModel.stop()
    }
    
    // 播放当前视频
    if let currentItem = items.first(where: { $0.id == newId }) {
        currentItem.videoPlayerModel.play()
        lastPlayedId = newId
    }
    
    // 提前触发无限滚动，避免滚动到底部才加载
    if let currentIndex = items.firstIndex(where: { $0.id == newId }),
       currentIndex >= items.count - 3 { // 滚动到倒数第3个时加载新内容
        // 替换为真实的新数据请求逻辑，不要重复添加现有内容
        let newReels = fetchNewReelsFromAPI()
        items.append(contentsOf: newReels)
    }
}

4. 避免重复添加现有数据 #

你之前append(contentsOf: self.items)会把已有的Reel重复添加，这会导致重复播放问题，必须替换成请求新的真实数据。

5. 优化ReelPlayerView的初始化逻辑 #

确保CustomVideoPlayer不会在视图刷新时重复创建AVPlayer实例，最好把视频加载逻辑封装在videoPlayerModel内部，避免每次视图重建都重新初始化播放器。

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