如何在LazyVStack/ScrollView SwiftUI中将图像带到前景?

Question

我有一个LazyVStack的帖子视图与图像在这些视图(类似于Instagram)。当我放大其中一张图像时，我希望该图像与所有其他内容重叠。然而，目前的情况是它与上面的帖子重叠，但在下面的帖子下面。我很确定这背后的原因是编译器将Zindex分配给堆栈中的每个元素，默认情况下，后面的元素被赋予更高的优先级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)
}
}
}
}

这是Post View的简化版本

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
}
}