Question

我正在尝试在 SwiftUI 中为我的应用添加全屏视图。这样做的目的是让“阴影”淡入，使屏幕变暗并将焦点集中到自定义弹出窗口，禁用背景中的内容。请参阅下面的视觉示例：

我试图添加此阴影的视图嵌入在复杂的 NavigationView 堆栈中（有几层深，通过 NavigationLink 访问）并且还有一个可见的 TabBar。到目前为止，我已经尝试将 NavigationView 嵌入 ZStack 并在顶部添加 Rectangle() 但无济于事，NavigationBar 和 TabBar 仍然位于此视图的顶部。我也试过使用 .zIndex() 修饰符，但这似乎没有任何作用。

非常感谢任何帮助，

谢谢

Answer 1

您不需要在 zIndex 上工作，因为您覆盖了所有屏幕！即使您不需要为使用弹出窗口禁用当前视图，因为弹出窗口已经在顶层了。当您没有覆盖时，zIndex 会有所帮助，这是一种方法：

    import SwiftUI

struct ContentView: View {
    
    @State private var isPresented: Bool = Bool()
    
    var body: some View {
        
        NavigationView {
            
            VStack {
                
                Button("show Custom pop-up") { isPresented.toggle() }
                
            }
            .navigationTitle("Navigation Title")

    
        }
        .overlay(popup)     // <<: applying popup to your View!
 
    }
    
    var popup: some View {
        
        Group {
            
            if isPresented {
                
                ZStack {
                    
                    Color.black.opacity(0.7).ignoresSafeArea()
                    
                    RoundedRectangle(cornerRadius: 20)
                        .fill(Color.white)
                        .frame(width: 300, height: 200, alignment: .center)
                        .overlay(Image(systemName: "xmark.circle").padding().onTapGesture { isPresented.toggle() }, alignment: .topTrailing)
                    
                    Text("Custom pop-up!")
                    
                    
                }
            }
            
        }

    }
}

Answer 2

这就是我想要的。

struct ContentView: View {
    
    @State var showingShade = false
    
    var body: some View {

        ZStack{
            
            //       Your other views goes here
            
            if showingShade{
                Rectangle()
                    .ignoresSafeArea()
                    .foregroundColor(.black)
                    .opacity(0.5)
            }
        }
    }
}

然后只需设置 showingShade = true 即可显示阴影。使用与 PopUp 相同的变量可能是个好主意。

要禁用视图，您可以在要禁用的特定视图上使用 .disabled() 修饰符。

SwiftUI：导航栏和标签栏上的全屏视图

2 个答案: