SwiftUI横向ScrollView中HStack挤压AVPlayer卡片、文字溢出问题

你遇到的卡片宽度不统一、文字越界问题，核心是SwiftUI布局约束缺失+修饰符使用不当导致的，具体原因有3点：

• 横向ScrollView内的HStack属于内容自适应容器，本身不会给子视图提供明确的宽度上限，你给RecentCard设置的.frame(maxWidth: .infinity)没有可参照的父视图宽度，每个卡片会根据内部内容（视频原始分辨率、文字长度）自行计算宽度，最终出现各卡片宽度不一致的问题——单个卡片放在非滚动垂直容器时，父视图有明确的屏幕宽度约束，所以不会触发这个问题。
• 卡片根视图没有添加裁剪规则，内部使用offset修饰符调整位置的文字、用了scaledToFill()的视频播放器，超出卡片边界的部分不会被截断，直接溢出覆盖到相邻卡片区域，就出现了文字越界的效果。
• 文字层滥用offset调整位置：offset只会改变视图的渲染位置，不会改变视图本身的布局占位和约束范围，你给浏览量文本加的.offset(x: 10)会直接把文本往卡片外侧推，进一步加剧越界问题。

问题效果截图

按以下步骤修改代码即可解决问题：

1. 给卡片设置明确的宽度约束，替换无参照的maxWidth: .infinity宽度设置
2. 给卡片根视图、视频播放器都添加.clipped()修饰符，截断所有超出边界的内容
3. 替换offset位置调整逻辑，使用Spacer、padding等参与布局计算的修饰符控制文本位置，避免内容意外溢出

修改后的横向滚动视图代码 #

ScrollView(.horizontal, showsIndicators: false) {
    HStack(spacing: 40) {
        ForEach(videoManager.videos) { video in
            RecentCard(video: video)
                // 给卡片设置明确宽度，这里示例为屏幕宽度减左右32pt边距，可根据需求调整
                .frame(width: UIScreen.main.bounds.width - 32, height: 300)
        }
    }
    .padding(.horizontal, 16) // 给HStack加左右内边距，让第一个/最后一个卡片和屏幕边缘留空
    .onChange(of: videoManager.videos) { _ in
        print("VM loaded Recents Videos")
    }
}

修改后的RecentCard代码 #

struct RecentCard: View {
    @State private var player = AVPlayer()
    @State private var playToggle: Bool = true
    @State var video: VideoModel
    
    var body: some View {
        ZStack(alignment: .leading) {
            videoPlayer
            textOverlay
        }
        // 移除原来无参照的maxWidth:.infinity设置，宽度由父视图传入
        .background(.thinMaterial, in: RoundedRectangle(cornerRadius: 20))
        .cornerRadius(20)
        .clipped() // 核心：裁剪所有超出卡片边界的内容
    }
    
    
    var videoPlayer: some View {
        VideoPlayer(player: player)
            .scaledToFill()
            .clipped() // 裁剪scaledToFill溢出的视频内容
            .onAppear {
                player = AVPlayer(url: video.videoUrlPath!)
                player.play()
            }
            .onTapGesture {
                playToggle.toggle()
                playToggle ? player.play() : player.pause()
                let impactHeavy = UIImpactFeedbackGenerator(style: .heavy)
                impactHeavy.impactOccurred()
            }
            .opacity(0.56)
            .background(.ultraThinMaterial)

    }
    
    var textOverlay: some View {
        VStack(alignment: .leading) {
            Text(video.title)
                .font(.title.bold())
                .textCase(.uppercase)
                // 给长标题加换行限制，避免文字过长撑爆布局
                .lineLimit(2)
            
            Spacer() // 用Spacer把下方内容推到底部，代替原来的offset偏移
            
            HStack(alignment: .bottom) {
                VStack(alignment: .leading, spacing: 4) {
                    Text(video.title2)
                        .font(.body)
                        .lineLimit(1)
                }
                Spacer() // 把浏览量推到右下角
                Text("\(video.viewCount) Views")
                    .font(.body)
                    .padding(15)
            }
            .opacity(0.67)
        }
        .frame(maxWidth: .infinity, maxHeight: .infinity, alignment: .topLeading)
        .padding()
        .foregroundColor(.white)
    }
}

补充：如果需要做不同设备的宽度自适应，可以用GeometryReader读取ScrollView的可见宽度，再按比例计算卡片宽度，避免用固定的UIScreen宽度在分屏、iPad场景下出现布局异常。

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