swiftui - How to open a view over the parent one with cards effect - Stack Overflow

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?

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.

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?

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.

• swiftui
• swiftui-navigation

Share Improve this question Follow edited Mar 23 at 13:24 devops asked Mar 23 at 13:22 devopsdevops 9,20366 gold badges5050 silver badges7777 bronze badges 1

• 2 That is a “sheet” – lorem ipsum Commented Mar 23 at 13:24

Add a comment  | 

1 Answer 1

Sorted by: Reset to default 1

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