SwiftUI中VideoPlayer无法全屏显示问题求助

你的问题核心是未给视频单元格设置明确的全屏尺寸约束，导致ScrollView中LazyVStack无法自动让子视图占满屏幕高度，模拟器中只渲染了头部元素。以下是具体修复方案：

步骤1：给ClassCellView添加全屏高度约束 #

使用GeometryReader获取当前屏幕的可用高度，强制每个视频单元格占据全屏：

struct ClassesFeedView: View {
    var body: some View {
        GeometryReader { geo in
            ScrollView(.vertical) {
                LazyVStack(spacing: 0) { // 全屏滚动不需要间距，设为0
                    ForEach(ClassPost.MOCKED_CLASSES) { post in
                        ClassCellView(item: post)
                            .frame(height: geo.size.height) // 强制单元格高度等于屏幕高度
                    }
                }
            }
            .edgesIgnoringSafeArea(.all) // 忽略安全区，让视频延伸到屏幕边缘
        }
    }
}

步骤2：让VideoPlayer填充整个单元格空间 #

修改ClassCellView，确保VideoPlayer和父视图都填充可用空间：

struct ClassCellView: View {
    @State var item: ClassPost
    @State var player = AVPlayer()

    var body: some View {
        ZStack(alignment: .top) { // 用ZStack直接布局，去掉多余VStack
            VideoPlayer(player: player)
                .scaledToFill() // 让视频按比例填充，保持宽高比
                .frame(maxWidth: .infinity, maxHeight: .infinity) // 填充整个单元格
                .clipped() // 裁剪超出部分，避免视频溢出屏幕
                .onAppear {
                    if player.currentItem == nil {
                        guard let videoUrl = Bundle.main.url(forResource: item.videoUrl, withExtension: "mp4") else { return }
                        let videoItem = AVPlayerItem(url: videoUrl)
                        player.replaceCurrentItem(with: videoItem)
                    }
                    DispatchQueue.main.asyncAfter(deadline: .now() + 0.5) {
                        player.play()
                    }
                }
            
            // 头部信息放在ZStack上层，保持原有布局
            HStack(){
                if let imageUrl = item.user?.profileImageUrl {
                    Image(imageUrl)
                        .resizable()
                        .scaledToFill()
                        .frame(width: 40, height: 40)
                        .clipShape(Circle())
                    
                } else {
                    Image(systemName: "person.crop.circle")
                        .resizable()
                        .frame(width: 40, height: 40)
                        .foregroundColor(.black.opacity(0.7))
                }
                VStack(alignment: .leading) {
                    Text(item.user?.username ?? "")
                    Text(item.user?.displayName ?? "")
                }
                .font(.footnote)
                Spacer()
            }
            .padding(.horizontal)
            .background(FoodlooseColors.cOrange)
        }
    }
}

关键修改说明 #

• GeometryReader：获取屏幕实际高度，确保每个单元格严格匹配屏幕尺寸
• LazyVStack(spacing: 0)：去掉单元格间的间距，实现无缝全屏滚动
• edgesIgnoringSafeArea(.all)：让视频延伸到屏幕顶部/底部的安全区外，贴合TikTok/Reels的全屏体验
• VideoPlayer的scaledToFill + clipped：保证视频按比例填充整个单元格，同时裁剪超出部分，避免布局混乱
• 简化ZStack布局：去掉多余的VStack嵌套，减少布局层级，避免不必要的间距影响

这样修改后，模拟器中每个视频帖子会全屏显示，和Xcode预览保持一致。后续你可以调整头部的样式和位置，不影响视频的全屏布局。

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