如何为SwiftUI的fullScreenCover自定义菜单设置透明背景

要实现菜单打开时背景透明、中央显示三个可选择菜单项的效果，需要从菜单页面的背景设置和弹出菜单的方式两部分调整：

1. 修改菜单页面（Menu_VW）的背景 #

当前代码中的NavigationView、GeometryReader等容器默认带有白色背景，需统一设置为透明：

var body: some View {
    NavigationView {
        GeometryReader { geo in
            ZStack(alignment: .center) {
                // 保留原有圆角边框和菜单项代码
                HStack {
                    Spacer()
                    RoundedRectangle(cornerRadius: 12)
                        .overlay(
                            RoundedRectangle(cornerRadius: UIDevice.current.userInterfaceIdiom == .phone ? 12 : 24)
                                .inset(by: 0.5)
                                .stroke(Color(red: 0.25, green: 0.41, blue: 1), lineWidth: 2)
                        )
                        .frame(width: geo.size.width * 0.8, height: geo.size.height * 0.3)
                        .padding()
                    Spacer()
                }
                VStack {
                    Spacer()
                    makeMenuItems(with: geo, menuItem: .map)
                    makeMenuItems(with: geo, menuItem: .locations)
                    makeMenuItems(with: geo, menuItem: .settings)
                    Spacer()
                }
            }
            .background(Color.clear) // 设置ZStack背景透明
        }
        .navigationBarHidden(true)
        .navigationBarBackButtonHidden(true)
        .frame(maxWidth: .infinity, maxHeight: .infinity)
        .background(Color.clear) // 设置GeometryReader背景透明
    }
    .edgesIgnoringSafeArea(.all)
    .background(Color.clear) // 设置NavigationView背景透明
}

2. 修改弹出菜单的方式 #

fullScreenCover默认自带不透明全屏背景，需替换为支持透明背景的弹出方式：

方案一：使用Sheet（推荐，iOS 16+） #

private func makeMenuButton() -> some View {
    Button {
        isMenuPresented.toggle()
    } label: {
        Image(menuIcon)
            .resizable()
            .scaledToFit()
            .frame(width: 24)
    }
    .sheet(isPresented: $isMenuPresented) {
        Menu_VW(item: .locations)
            .presentationBackground(.clear) // 设置Sheet背景透明
            .presentationDetents([.large]) // 可选：设置Sheet为全屏尺寸
    }
}

方案二：保留fullScreenCover（iOS 16+） #

如果必须使用fullScreenCover，添加透明背景设置即可：

private func makeMenuButton() -> some View {
    Button {
        isMenuPresented.toggle()
    } label: {
        Image(menuIcon)
            .resizable()
            .scaledToFit()
            .frame(width: 24)
    }
    .fullScreenCover(isPresented: $isMenuPresented) {
        Menu_VW(item: .locations)
            .presentationBackground(.clear)
    }
}

关键注意点 #

• presentationBackground(.clear)是iOS 16及以上的API，用于直接设置弹出层背景透明；
• 需确保菜单页面的所有容器都设置background(Color.clear)，避免默认白色背景透出；
• 若需兼容iOS 15及以下，可通过UIViewControllerRepresentable自定义Modal，设置modalPresentationStyle = .overFullScreen并将背景设为透明。

内容的提问来源于stack exchange，提问作者SerjBets