呈现 Modal 全屏 SwiftUI

Posted

技术标签:

【中文标题】呈现 Modal 全屏 SwiftUI【英文标题】:Present Modal fullscreem SwiftUI 【发布时间】:2019-09-20 06:50:37 【问题描述】:

我怎样才能呈现一个将占据全屏并且不能通过向下滑动来关闭的模式?目前我正在使用.sheet 来呈现一个可忽略的模式。

我没有注意到 Xcode 中的任何测试版更改会改变这种行为。

任何帮助将不胜感激:)

【问题讨论】:

可能是***.com/questions/56756318/…的副本 @maddy 他们正在使用 UIViewControllers。我想纯粹使用视图 可以禁用关闭,请参见此处:***.com/questions/57398353/… 但 Modal 并不意味着全屏。也许您需要以不同的方式呈现您的下一个视图。 @LuLuGaGa 我只想全屏显示视图 【参考方案1】:

SwiftUI 1.0

我不确定这是否是您想要使用的,但可以通过使用 ZStack 和一个状态变量来控制它的隐藏/显示来创建您自己的模式屏幕。

代码

struct CustomModalPopups: View 
    @State private var showingModal = false
    
    var body: some View 
        ZStack 
            VStack(spacing: 20) 
                Text("Custom Popup").font(.largeTitle)
                
                Text("Introduction").font(.title).foregroundColor(.gray)
                
                Text("You can create your own modal popup with the use of a ZStack and a State variable.")
                    .frame(maxWidth: .infinity)
                    .padding().font(.title).layoutPriority(1)
                    .background(Color.orange).foregroundColor(Color.white)
                
                Button(action: 
                    self.showingModal = true
                ) 
                    Text("Show popup")
                
                Spacer()
            
            
            // The Custom Popup is on top of the screen
            if $showingModal.wrappedValue 
                // But it will not show unless this variable is true
                ZStack 
                    Color.black.opacity(0.4)
                        .edgesIgnoringSafeArea(.vertical)
                    // This VStack is the popup
                    VStack(spacing: 20) 
                        Text("Popup")
                            .bold().padding()
                            .frame(maxWidth: .infinity)
                            .background(Color.orange)
                            .foregroundColor(Color.white)
                        Spacer()
                        Button(action: 
                            self.showingModal = false
                        ) 
                            Text("Close")
                        .padding()
                    
                    .frame(width: 300, height: 200)
                    .background(Color.white)
                    .cornerRadius(20).shadow(radius: 20)
                
            
        
    

示例

(摘自《SwiftUI 视图》一书) 所以在这里,您的弹出窗口很小,但您可以调整尺寸以使用该 VStack 上的帧修饰符使其全屏。

【讨论】:

始终使用 zstacks 并不理想。例如,如果您在新视图 UserDefaults.standard 上擦除,而后面的旧视图依赖于它,则应用程序将崩溃。 是的,这就是我目前能想到的关于您的问题的全部内容。我会留意其他选项。 黑色透明覆盖不与导航栏重叠。它出现在导航栏下

以上是关于呈现 Modal 全屏 SwiftUI的主要内容,如果未能解决你的问题,请参考以下文章

iOS开发中控制器切换方式Modal

React Native Modal Selector中的全屏显示

bootstrap modal在弹出框中播放视频,全屏后chrome按esc后不仅退出视频也退出了modal

react-native modal 不占用设备的全屏

在模态框(Modal)中使用UEditor全屏显示的一个坑

iOS 如何从 Uiview 呈现 Modal ViewController