Zoom Image over top of other Views SwiftUI

Question

I have a image as thumbnail when image is tapped it should be expanded/zoom at the centre of screen with background as blur. I tried scale effect but the image is not on top of other view but looks like behind (see pics). How to achieve this zoomed imaged with blur background effect (see peacock pic this is the requirement)

@State var enlarge:Bool = false

var body: some View {
  
    GeometryReader{geo in
        
                VStack{
                    
                    ZStack(alignment: .top){
                    
                        LinearGradient(gradient:Gradient(colors: [.blue.opacity(0.3),.blue.opacity(0.2)]),startPoint: .top,endPoint:.bottom)
                        .ignoresSafeArea()
                       
                        
                        VStack(alignment: .leading,spacing :5){
                       
                                HStack{
                                        Text("Lorum Ipsum ackndweg")
                                        .fontWeight(.semibold)
                                        .padding(.top,15)
                                        .padding(.leading,18)
                                        .foregroundColor(ThemeColor.testName)
                                        }
                                        .frame(width: geo.size.width, alignment: .leading)
                            
                          
                         
                                            Image("capAm")
                                                        .resizable()
                                                        .scaledToFit()
                                                        .frame(width: 40, height: 40)
                                                        .padding(.leading,18)
                                                        .onTapGesture{
                                                            withAnimation
                                                            {
                                                                self.enlarge.toggle()
                                                                
                                                            }
                                                        }
                                                        .scaleEffect(self.enlarge ? 4 : 1,anchor: .topLeading)
                           
                            
                        VStack(alignment:.leading,spacing: 5){
                                
                                HStack{
                                        Text("Turn Around Time :")
                                        .font(.system(size: 14))
                                        .foregroundColor(.red)
                                        Text("Report Delivery : Daily")
                                        .font(.system(size: 14))
                                        .foregroundColor(.orange)
                                      }
                                .frame(width: geo.size.width, alignment: .center)
                                    
                                    VStack(alignment:.leading)
                                        {
                                            HStack{
                                                    Text("Turn Around Time(TAT) :")
                                                    .font(.system(size: 14))
                                                    .foregroundColor(.red)
                                                    
                                            
                                                    Text("4 hours after acceptance of the sample at the centre")
                                                    .font(.system(size: 14))
                                                    .foregroundColor(.red)
                                                    .multilineTextAlignment(.leading)
                                                }
                                }.frame(width: geo.size.width, alignment: .center)
                                    
                                }
                        }}}}}}

on Image .zIndex(3) anyway to achieve this "Peacock" effect, this is not the best way to proceed, is better to create a detailed Form to popup — Simone Pistecchia, Aug 26 '22 at 11:34
it worked but need to set it at centre looking also at below soon provided by yourself — tintin, Aug 29 '22 at 07:24
enlarged image, setting anchor on scaleEfffect not getting it — tintin, Aug 29 '22 at 09:35

score 0 · Answer 1 · answered Aug 26 '22 at 11:56

below just an idea

struct SwiftUIView: View {
    @State private var enlarge = false
    @State private var list = 1...10
    @State private var current = 0
    
    var body: some View {
        ZStack {
            ZStack {
                Image(systemName: "\(current).circle")
                    .resizable()
                    .scaledToFit()
                    .frame(width: 60 , height: 60)
                    .padding()
                    .animation(.spring(), value: enlarge)
                    .foregroundColor(.yellow)
                
            }
            .frame(width: 300,
                   height: 200)
            .background(Color.black.opacity(0.2))
            .foregroundColor(Color.clear)
            .cornerRadius(20)
            .transition(.slide)
            .opacity(self.enlarge ? 1 : 0)
            .zIndex(2)
            .onTapGesture{
                withAnimation {
                    self.enlarge.toggle()
                }
            }
            List {
                ForEach(list, id:\.self) { i in
                    Label("detail of \(i)", systemImage: "\(i).circle")
                        .onTapGesture{
                            current = i
                            withAnimation {
                                self.enlarge.toggle()
                            }
                        }
                }
            }
            
            .blur(radius: self.enlarge ? 3 : 0).offset(y: 1)
        }
        .onTapGesture{
            withAnimation {
                self.enlarge = false
            }
        }
        
    }
}

Zoom Image over top of other Views SwiftUI

1 Answers1