I'm stumped how to pop a subview over a view with SwiftUI

Question

I'm working on an app for iPad that is to be used to manage a personal cash budget. I'm working with XCode 12 building for iOS 14 using SwiftUI. I have most of the underlying MODEL work done, but I'm struggling with the UI. I've programmed in various languages since 1979. (Yes I' old and doing this is a hobby :-). I can not for the life of me figure out the technique to pop an edit/entry view over a parent view. As an example, I have an app the I also use that does just this. I'm attaching an image that shows what I'd like to be able to do. I've tried .overlay() and ZStack, but what I've tried just doesn't give me what I want. If you could look at the image I'm posting and point me in the right direction for even just for technique I'd be really appreciative....

Image of entry view popped over subview:

Image of subview before:

Answer 1

The image looks like the new view is being presented via the .sheet() modifier. This is the most common approach to present a view like this. I would just note that it looks slightly different on iPad (like the image above) vs iPhone (extends full width of screen).

struct Test: View {
    
    @State var showSheet: Bool = false
    
    var body: some View {
        Text("Hello, World!")
            .onTapGesture {
                showSheet.toggle()
            }
            .sheet(isPresented: $showSheet, content: {
                Text("Next view")
            })
    }
}

Alternatively, here are 2 other methods to present a sheet, which can be a little more customizable (custom animations/transitions) if required.

struct Test2: View {
    
    @State var showSheet: Bool = false
    
    var body: some View {
        ZStack {
            Text("Hello, World!")
                .frame(maxWidth: .infinity, maxHeight: .infinity)
                .onTapGesture {
                    showSheet.toggle()
                }
                
            if showSheet {
                Text("Next view")
                .frame(maxWidth: .infinity, maxHeight: .infinity)
                .background(Color.red)
                .animation(.spring())
                .transition(.move(edge: .bottom))
            }
        }
    }
}

struct Test3: View {
    
    @State var showSheet: Bool = false
    
    var body: some View {
        ZStack {
            Text("Hello, World!")
                .frame(maxWidth: .infinity, maxHeight: .infinity)
                .onTapGesture {
                    showSheet.toggle()
                }
                
            Text("Next view")
                .frame(maxWidth: .infinity, maxHeight: .infinity)
                .background(Color.red)
                .opacity(showSheet ? 1.0 : 0)
                .animation(.spring())
        }
    }
}