我很困惑如何使用 SwiftUI 在视图上弹出子视图

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

我正在为 iPad 开发一款用于管理个人现金预算的应用程序。我正在使用 SwiftUI 为 iOS 14 构建 XCode 12。我已经完成了大部分基础模型工作,但我正在为 UI 而苦苦挣扎。自 1979 年以来,我一直使用各种语言进行编程。(是的,我已经老了,这样做是一种爱好 :-)。我一辈子都想不出在父视图上弹出 edit/entry 视图的技术。例如,我有一个我也使用的应用程序就是这样做的。我附上了一张图片,展示了我希望能够做什么。我试过 .overlay() 和 ZStack,但我试过的并没有给我想要的东西。如果你能看看我发布的图片并为我指出正确的方向,即使只是为了技术,我也会非常感激....

条目视图的图像在子视图上弹出:

之前的子视图图像:

图像看起来像是通过 .sheet() 修饰符呈现的新视图。这是呈现此类视图的最常见方法。我只是注意到它在 iPad(如上图)和 iPhone(扩展屏幕的整个宽度)上看起来略有不同。

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

或者,这里有 2 种其他方法来呈现 sheet,如果需要,可以更加自定义(自定义 animations/transitions)。

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