叠加在内联导航栏之上答案

【问题标题】：Overlay on top of inline navbar叠加在内联导航栏之上
【发布时间】：2021-05-14 07:27:38
【问题描述】：

是否可以在内联导航栏顶部叠加某些内容？这是一个带有弹出窗口的示例，您可以在其中显示和提醒，然后在提醒之外点击以将其关闭。

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

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)
        }
    }
}

【问题讨论】：

不确定我们是否还没有尝试过，但是您可以尝试为具有相同不透明度的导航栏提供相同的颜色。
这是否回答了您的问题stackoverflow.com/a/63259094/12299030？

标签： swiftui swiftui-navigationview

【解决方案1】：

在 ZStack 中包装 NavigationView。

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!")
                }
            }
        }
        
    }
}

另一种使用叠加的方式。

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!")
            }
        }
    }
}

【讨论】：