叠加在内联导航栏之上

Posted 2023-02-24

【中文标题】叠加在内联导航栏之上

【英文标题】：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)
        
    

【问题讨论】：

不确定我们是否还没有尝试过，但是您可以尝试为具有相同不透明度的导航栏提供相同的颜色。

这是否回答了您的问题***.com/a/63259094/12299030？

【参考方案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!")