SwiftUI - zIndex change not working for item inside of LazyVStack

42 Views Asked by At

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

0

There are 0 best solutions below