内联导航栏顶部的叠加 [英] Overlay on top of inline navbar

问题描述

是否可以在内联导航栏上叠加某些内容?这是一个带有弹出窗口的示例，您可以在其中显示并发出警报，然后点击警报外部以关闭它.

Is it possible to overlay something on top of an inline nav bar? Here's an example with a popup where you can display and alert and then tap outside the alert to dismiss it.

我希望深色背景覆盖也覆盖导航栏.这适用于默认的大文本样式导航栏，但是当我将其更改为内联导航栏时，深色背景不再覆盖导航.有解决方法吗?

I'd like the dark background overlay to also cover the nav bar. This works fine for the default large text style nav bar, but when I change it to an inline nav bar, the dark background no longer covers the nav. Is there a workaround for this?

import SwiftUI

struct ContentView: View {
    @State private var isPresented = false
    
    var body: some View {
        NavigationView {
            ZStack {
                    Button(action: {
                        isPresented = true
                    }) {
                        Text("Show popup")
                    }
                
                if isPresented {
                    ZStack {
                        Rectangle()
                            .foregroundColor(Color.black.opacity(0.5))
                            .edgesIgnoringSafeArea(.all)
                            .onTapGesture {
                                isPresented = false
                            }
                        
                        Rectangle()
                            .foregroundColor(Color.red)
                            .frame(width: 300, height: 100)
                            .onTapGesture {
                                isPresented = true
                            }
                        Text("Alert!")
                    }
                }
            }
            .navigationBarTitle("Hello", displayMode: .inline)
        }
    }
}

推荐答案

将 NavigationView 包裹在 ZStack 中.

Wrapped NavigationView inside the ZStack.

struct ContentView: View {
    @State private var isPresented = false
    
    var body: some View {
        ZStack { // < -- Here
            NavigationView {
                ZStack {
                    Button(action: {
                        isPresented = true
                    }) {
                        Text("Show popup")
                    }
                    
                    
                }
                .navigationBarTitle("Hello", displayMode: .inline)
            }
            if isPresented {
                ZStack {
                    Rectangle()
                        .foregroundColor(Color.black.opacity(0.5))
                        .edgesIgnoringSafeArea(.all)
                        .onTapGesture {
                            isPresented = false
                        }
                    
                    Rectangle()
                        .foregroundColor(Color.red)
                        .frame(width: 300, height: 100)
                        .onTapGesture {
                            isPresented = true
                        }
                    Text("Alert!")
                }
            }
        }
        
    }
}

---

另一种使用叠加层的方法.

---

Another way to use overlay.

struct ContentView: View {
    @State private var isPresented = false
    
    var body: some View {
        NavigationView {
            ZStack {
                Button(action: {
                    isPresented = true
                }) {
                    Text("Show popup")
                }
            }
            .navigationBarTitle("Hello", displayMode: .inline)
        }.overlay( //<--- Here
            alertView
        )
    }
    
    @ViewBuilder
    private var alertView: some View {
        if isPresented {
            ZStack {
                Rectangle()
                    .foregroundColor(Color.black.opacity(0.5))
                    .edgesIgnoringSafeArea(.all)
                    .onTapGesture {
                        isPresented = false
                    }
                
                Rectangle()
                    .foregroundColor(Color.red)
                    .frame(width: 300, height: 100)
                    .onTapGesture {
                        isPresented = true
                    }
                Text("Alert!")
            }
        }
    }
}

这篇关于内联导航栏顶部的叠加的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！