SwiftUI中如何在LazyVStack/ScrollView中将图片置于前景？

你的问题核心在于：用全局isZooming给所有PostView设置相同zIndex时，LazyVStack内后续元素的默认层级优先级仍然更高，导致放大的图片被下方帖子遮挡。需要精准标记当前放大的帖子，单独给它设置最高层级。

修改方案 #

1. 替换全局状态，改为追踪当前放大的帖子ID
2. 调整手势逻辑，仅在当前帖子放大时标记其ID
3. 动态设置zIndex，仅让正在放大的帖子拥有最高层级
4. 确保放大的图片可以超出布局边界

修改后的代码 #

TimelineView

struct TimelineView: View {
    @State private var zoomedPostId: Post.ID? // 追踪当前放大的帖子ID
    @State var posts: [Post]
    
    var body: some View {
        LazyVStack {
            ForEach(posts) { post in
                PostView(post: post, zoomedPostId: $zoomedPostId)
                    // 仅当前放大的帖子设置最高层级，其他保持默认
                    .zIndex(zoomedPostId == post.id ? 1000 : 0)
            }
        }
    }
}

PostView

struct PostView: View {
    let post: Post
    @Binding var zoomedPostId: Post.ID?
    
    var body: some View {
        VStack {
            Text(post.caption)
            post.image
                .gesture(
                    MagnificationGesture()
                        .onChanged { _ in
                            // 开始放大时记录当前帖子ID
                            zoomedPostId = post.id
                        }
                        .onEnded { _ in
                            // 结束放大时清空标记
                            zoomedPostId = nil
                        }
                )
                .allowsHitTesting(zoomedPostId == post.id) // 避免其他图片干扰当前操作
                .clipped(false) // 允许图片超出PostView边界，不被裁剪
        }
    }
}

关键说明 #

• 用zoomedPostId替代全局isZooming，精准定位正在放大的帖子，确保只有它拥有最高层级
• 把zIndex设为1000是为了确保层级远高于其他元素，彻底避免被后续帖子覆盖
• .clipped(false)解决图片放大后被PostView布局边界裁剪的问题
• .allowsHitTesting防止未放大的图片误触手势操作

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