swiftuiswiftui-navigation

How to open a view over the parent one with cards effect


I spend a lot of time with asking copilot and google how to do this type of transition in swiftui but without result.

I need this type of transition between two views. How to do it in swiftui?

App-Store animation

As you can see, the first view ist still visible a little bit on the top of the screen.

This is something like card view transition, because the second view is over the parent view. I'm new to swiftui, so ablolutely no idea where to start.

this is what I have tried so far:

import SwiftUI

struct AccountDetailsView: View {
    
    @Binding var isVisible: Bool
    
    var edgeTransition: AnyTransition = .move(edge: .bottom)

    var body: some View {
        ZStack(alignment: .bottom) {
            if (isVisible) {
                Color.black
                    .opacity(0.3)
                    .ignoresSafeArea()
                    .onTapGesture {
                        isVisible.toggle()
                    }
                AccountDetailsContentView(presentSideMenu: $isVisible)
                    .transition(edgeTransition)
                    .background(
                        Color.clear
                    )
            }
        }
        .frame(maxWidth: .infinity, maxHeight: .infinity, alignment: .bottom)
        .ignoresSafeArea()
        .animation(.easeInOut, value: isVisible)
    }
}

But this looks like a hack and there is no "cards" effect.


Solution

  • It is actually a sheet, you can use .sheet function directly without having to customize any view's appearance. I' m assuming AccountDetailsContentView is the content that you wish to present as a sheet.

    struct AccountListView: View {
        @State private var presentedDetail: Bool = false
        
        var body: View {
            ...
            .sheet(isPresented: $presentedDetail) {
                AccountDetailsContentView()
            }
        }
    }