SwiftUI 将覆盖添加到整个屏幕

Posted 2023-02-24

【中文标题】SwiftUI 将覆盖添加到整个屏幕

【英文标题】：SwiftUI add overlay to entire screen

【发布时间】：2021-07-08 14:07:52

【问题描述】：

我正在尝试创建一个弹出菜单，类似于我们在 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))
    

【参考方案1】：

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

例如，

NavigationView 
    //Some content

.overlay(popup(_,_))

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

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

【讨论】：

这有点棘手，因为每个选项卡都有自己的菜单，并且在父视图中放置一个叠加层意味着从所有子视图就显示的内容进行交流——这是我想要避免的！

在此回答 ***.com/a/69342575/10229223 看看这个！

@amintorabi 这似乎很有趣。虽然问题暂时解决了，但我一定会试一试的！