I have problem with zIndex in my app with collection of images I've added pinch zoom to the image, but when image is zoomed it does not get on top of other images which are next in the collection.
When using VStack then everything is fine. Problem only when using LazyVStack
Here is source code of content view.
struct ContentView: View {
@StateObject var vm: PostsViewModel
init(_ viewModel: PostsViewModel? = nil) {
let vm = viewModel != nil ? viewModel : PostsViewModel()
_vm = StateObject(wrappedValue: vm!)
}
var body: some View {
if vm.isLoading {
ProgressView()
} else {
ScrollView (.vertical, showsIndicators: false) {
LazyVStack (spacing: 34) {
ForEach(vm.collectionResponse.data, id: \.id, content: {
post in
PostView(imageUrl: post.attachments.first!.url)
})
}
.padding([.horizontal], 12)
}
}
}
}
PostView SourceCode:
struct PostView: View {
@State var imageUrl: String
@State var offset: CGPoint = .zero
@State var scale: CGFloat = 0
@State var scalePosition: CGPoint = .zero
init(imageUrl: String) {
self.imageUrl = imageUrl
}
var body: some View {
KFImage(URL(string: imageUrl))
.cacheMemoryOnly()
.resizable()
.scaledToFill()
.frame(maxWidth: getRect().width, maxHeight: 500)
.cornerRadius(12.0)
.offset(x: offset.x, y: offset.y)
.overlay(
ZoomGesture(
scale: $scale,
offset: $offset,
scalePosition: $scalePosition)
)
.scaleEffect(
1 + (scale < 0 ? 0 : scale),
anchor: .init(x: scalePosition.x, y: scalePosition.y))
.zIndex(scale > 0 ? 1000 : 0)
}
}
Thank you