如何在 LazyVStack/ScrollView SwiftUI 中将图像置于前台？

Question

我有一个 LazyVStack of Post Views，这些视图中有图像（类似于 Instagram）。 当我放大其中一张图片时，我希望该图片与所有其他内容重叠。 然而，目前正在发生的事情是它重叠在它上面的帖子上，但在它下面的帖子下。 我很确定这背后的原因是编译器将 Zindexes 分配给 Stack 中的每个元素，默认情况下，后面的元素会获得更高优先级的 Zindex 值。

我试过使用 Zindexes，但无济于事。 我试过在 PostView 中使用 @Binding 变量来更新时间轴视图中的 @State 变量，但这也不起作用。 首先，这是我的时间轴视图的简化版本

struct TimelineView: View {
    @State var isZooming: Bool = False
    @State var posts : [Post]
    var body: some View {
        LazyVStack {
            ForEach(posts) { post in
                PostView(post, $isZooming)
                    .zIndex(isZooming ? 1 : 0)
            }
        }
    }
}

这是我的帖子视图的简化版本

struct PostView: View {
    var post : Post
    @Binding var isZooming: Bool
    var body: some View {
        VStack {
            post.caption
            post.image
                .gesture(MagnificationGesture().onChanged { amount in 
                    self.isZooming = true
                }   
        }
    }
}

Answer 1

您的zIndex方法是正确的，但是如果您在ForEach中应用它，它将为所有帖子设置，因此它们最终都是 zIndex = 1。

如果将zIndex移动到子视图中，它会起作用：

struct TimelineView: View {
    
    @State var posts : [Post] = Post.dummyData
    
    var body: some View {
        ScrollView {
            LazyVStack {
                ForEach(posts) { post in
                    PostView(post: post)
                }
                .padding()
            }
        }
    }
}

struct PostView: View {
    var post : Post
    
    @State var isZooming: Bool = false
    @State var zoom: CGFloat = 1
    
    var body: some View {
        VStack {
            Text(post.caption)
            Image(post.image)
                .resizable().scaledToFill()
                .frame(height: 250
                )
                .clipped()
                .scaleEffect(zoom)
            
                .gesture(MagnificationGesture()
                    .onChanged { value in
                        zoom = value
                        isZooming = true
                    }
                    .onEnded { _ in
                        zoom = 1
                        isZooming = false
                        
                    }
                )
        }
        .zIndex(isZooming ? 1 : 0) // here
    }
}