我很困惑如何使用 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())
}
}
}
我正在为 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())
}
}
}