SwiftUI如何将Overlay对齐不同高度视频的左上角

核心问题分析 #

你当前的实现问题在于：给VideoPlayer设置了固定的父视图尺寸，但VideoPlayer会根据视频自身的宽高比自适应渲染，实际视频区域可能在父视图中居中（上下留黑边），导致通过父视图GeometryReader计算的偏移量无法匹配视频的实际左上角位置。

方案一：利用SwiftUI内置布局简化实现 #

直接通过overlay的对齐参数和内边距定位，无需手动计算偏移量，这是最简洁的解决方式：

1. 修改VideoOverlayView，移除偏移量参数，改用内边距控制位置：

struct VideoOverlayView: View {
    var body: some View {
        Image(systemName: "calendar.badge.clock")
            .padding(10)
            .background(Color.white.opacity(0.7))
            .cornerRadius(8)
            .padding(.top, 15) // 距离视频顶部的间距
            .padding(.leading, 15) // 距离视频左侧的间距
    }
}

2. 在主视图中，将VideoOverlayView直接作为VideoPlayer的overlay，并指定对齐方式为.topLeading：

VideoPlayer(player: player)
    .background(Color.black)
    .overlay(VideoOverlayView(), alignment: .topLeading)

这种方式下，overlay会自动贴合VideoPlayer的实际显示区域（而非你设置的父视图frame），不管视频是全屏还是上下留黑边，图标都会固定在视频的左上角。

方案二：通过AVPlayer监听视频尺寸精确计算位置 #

如果需要更精细的控制（比如动态调整偏移量），可以监听AVPlayerItem的presentationSize获取视频实际尺寸，再计算其在父视图中的位置：

1. 给EditorView添加监听视频尺寸的方法：

private func observeVideoSize() {
    guard let playerItem = player?.currentItem else { return }
    let _ = playerItem.observe(\.presentationSize, options: .new) { [weak self] item, change in
        guard let size = change.newValue, size.width > 0, size.height > 0 else { return }
        DispatchQueue.main.async {
            let screenWidth = UIScreen.main.bounds.width
            // 计算视频在屏幕上的缩放比例
            let scale = screenWidth / size.width
            let renderedVideoHeight = size.height * scale
            // 视频顶部的Y坐标 = (屏幕高度 - 视频渲染高度) / 2
            let videoTopOffset = (UIScreen.main.bounds.height - renderedVideoHeight) / 2
            self?.videoPlayerY = videoTopOffset
        }
    }
}

2. 在onAppear中初始化播放器并启动监听：

.onAppear {
    if let url = selectedVideoURL {
        player = AVPlayer(url: url)
        observeVideoSize()
    }
}

3. 修改VideoOverlayView的位置计算：

VideoOverlayView(
    xOffset: 20, // 图标中心距离左侧的位置（图标宽度/2 + 边距）
    yOffset: videoPlayerY + 20 // 图标中心距离顶部的位置（图标高度/2 + 边距 + 视频顶部偏移）
)

额外优化建议 #

• 移除VideoPlayer上固定的.frame(width: geometry.size.width, height: geometry.size.height)，让VideoPlayer自动适配父视图，避免强制拉伸视频导致变形。
• 如果需要黑边填充，直接给VideoPlayer套一层黑色背景的容器即可，无需手动设置frame。

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