SwiftUI 将覆盖添加到整个屏幕

Question

我正在尝试创建一个弹出菜单，类似于我们在 SwiftUI 中的 .menu() 修饰符。我设法创建了修饰符，它工作正常。

问题：我遇到的问题是，当菜单显示时，我无法将覆盖扩展到整个屏幕。这是我尝试覆盖它时得到的结果（以蓝色显示）

问题的原因是我有一个 TabView，它被包裹在父 NavigationView 中。

菜单修饰符：这是我创建的用于显示弹出菜单的修饰符。

import SwiftUI

struct PopupMenu<MenuContent: View>: ViewModifier {
    
    let menuContent: MenuContent
    @Binding var isPresented: Bool
    
    // Number crunching to limit menu size to 2/3rd of the screen
    private let paddingRatio: CGFloat = 0.33
    private let screenWidth = UIScreen.main.bounds.width
    
    init(isPresented: Binding<Bool>, @ViewBuilder content: () -> MenuContent) {
        _isPresented = isPresented
        menuContent = content()
    }
    
    func body(content: Content) -> some View {
        ZStack {
            // The content to show menu on
            content
            if isPresented {
                ZStack {
                    // Overlay to hide background - blue color is just to accentuate the issue
                    Color.blue
                        .onTapGesture {
                            isPresented.toggle()
                        }
                    // Actual menu rectangle
                    VStack {
                        HStack() {
                            Spacer(minLength: paddingRatio * screenWidth)
                            menuContent
                                .padding(regularPadding)
                                .background(
                                    RoundedRectangle(cornerRadius: regularCorner)
                                        .foregroundColor(.white)
                                        .shadow(color: darkGray.opacity(0.3), radius: 24, x: -4, y: 12)
                                )
                        }
                        Spacer()
                    }
                    .padding(.trailing, regularPadding)
                    .padding(.top, 2)
                }
            }
        }
    }
}

extension View {
    func popupMenu<MenuContent: View>(isPresented: Binding<Bool>, @ViewBuilder content: @escaping () -> MenuContent) -> some View {
        self.modifier(PopupMenu(isPresented: isPresented, content: content))
    }
}

Answer 1

所以很明显你有一个NavigationView。所以在这种情况下，使用.overlay(popupMenu()) 将菜单覆盖在现有的NavigationView 上

例如，

NavigationView {
    //Some content
}
.overlay(popup(_,_))

在您的popOver 视图中，请确保将.ignoresSafeArea() 添加到Color 视图中，如下所示

Color.blue
   .ignoresSafeArea()
   .onTapGesture {
       isPresented.toggle()
    }