我怎样才能推送下一个 SwiftUI 视图但在全屏上显示它而不像 Xcode 10 模态演示那样向下滑动功能。
我当前的实现，但它没有推到全屏（启用下拉和顶部的间隙）：
btn
.presentation(
!showModal.value ?
nil :
Popover(content: destination, dismissHandler: onTrigger ?? {})
)
【问题讨论】：
我认为目前唯一的方法是使用overlay() 或ZStack。使用overlay() 时我似乎无法进行转换，但使用ZStack 时我可以
只需确保您的模态视图使用List 或使用Spacer() 之类的内容填满屏幕，否则您仍然会看到它后面的另一个视图
struct ContentView: View {
@State var showModal = false
let transition = AnyTransition.move(edge: .bottom)
var body: some View {
ZStack {
VStack {
Button(action: {
withAnimation {
self.showModal = true
}
}) {
Text("Show Modal")
}
}
if self.showModal {
ModalView()
.background(Color.white)
.transition(transition)
}
}
}
}
【讨论】：
fullScreenCover() 修饰符iOS 14 有一个名为 fullScreenCover() 的新 SwiftUI 修饰符。它是一种全屏模式的呈现方式。它的工作原理几乎与普通工作表相同。例如，这将在按下按钮时呈现全屏模式视图：
struct ContentView: View {
Button("Present Full Screen Modal!") {
self.isPresented.toggle()
}
.fullScreenCover(isPresented: $isPresented) {
NavigationView {
FullScreenModalView()
.toolbar {
ToolbarItem(placement: .navigationBarTrailing) {
Button(action: {
isPresented = false
}, label: {
Text("Dismiss")
})
}
}
}
}
}
}
目标视图可以通过向下滑动或 Apple 推荐的更好的方式关闭，添加关闭按钮（已添加到导航工具栏中）：
struct FullScreenModalView: View {
var body: some View {
ZStack {
Color.pink
Text("This my full screen modal view")
.foregroundColor(.white)
}
.ignoresSafeArea()
.onTapGesture {
presentationMode.wrappedValue.dismiss()
}
}
}
【讨论】：
简短的回答是，目前没有好的方法可以做到这一点。
这里有几个选择：
看到这个Present a new view in SwiftUI
第一个答案涵盖了这个解决方案。基本上，您使用Bool 在“基本”视图之上或代替“基本”视图呈现“模态”视图。
类似这样的：
struct ModalView: View {
var closeAction: (() -> Void) = {}
var body: some View {
ZStack {
Color.blue.edgesIgnoringSafeArea(.all)
VStack {
Text("I am a modal.")
.font(.largeTitle)
.fontWeight(.bold)
.foregroundColor(.white)
.padding()
Button(action: {
self.closeAction()
}, label: {
Text("OK, BYE!")
.foregroundColor(.white)
.padding()
.overlay(
RoundedRectangle(cornerRadius: 5)
.stroke(Color.white, lineWidth: 1)
)
})
}
}
}
}
struct BaseView: View {
@State private var showModal = false
var body: some View {
ZStack {
if showModal {
ModalView(closeAction: {
withAnimation(.easeOut(duration: 0.25)) { self.showModal = false }
}).transition(.slideBottom)
} else {
VStack {
Button(action: {
withAnimation(.easeOut(duration: 0.25)) {
self.showModal = true
}
}, label: {
Text("Open Modal")
.padding()
.overlay(
RoundedRectangle(cornerRadius: 5)
.stroke(Color.blue, lineWidth: 1)
)
})
}
}
}.statusBar(hidden: true)
}
}
它有自己的一系列问题：
如需对此进行全面探索，请参阅 https://github.com/piterwilson/SwiftUI-Modal-on-iPad/tree/master/iPadConditionalViewModal 和此 ViewModifier 我让代码更简洁 https://github.com/piterwilson/SwiftUI-FullscreenModalViewModifier
NavigationView + NavigationLink
您也可以使用NavigationView + NavigationLink 全屏显示，但最大的问题是您将无法自定义动画。它看起来像这样：
struct ModalView: DismissableView {
@Environment(\.presentationMode) var presentationMode: Binding<PresentationMode>
var body: some View {
ZStack {
Color.green.edgesIgnoringSafeArea(.all)
VStack {
Text("I am a modal.")
.font(.largeTitle)
.fontWeight(.bold)
.foregroundColor(.white)
.padding()
Button(action: {
self.dismiss()
}, label: {
Text("OK, BYE!")
.foregroundColor(.white)
.padding()
.overlay(
RoundedRectangle(cornerRadius: 5)
.stroke(Color.white, lineWidth: 1)
)
})
}
}.navigationBarBackButtonHidden(true)
}
}
struct BaseView: View {
var body: some View {
NavigationView {
VStack {
NavigationLink(destination: ModalView()) {
Text("Open Modal")
.padding()
.overlay(
RoundedRectangle(cornerRadius: 5).stroke(Color.blue, lineWidth: 1)
)
}
}
}
.navigationViewStyle(StackNavigationViewStyle())
}
}
它也有问题：
【讨论】：