全屏覆盖自定义菜单的半透明背景

Question

我需要在菜单打开时制作透明背景。我按下按钮菜单，我需要看到一个中心屏幕组件，其中包含三个菜单项可供选择和透明背景。

这是我的菜单代码片段：

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()
                }
            }
        }
        .navigationBarHidden(true)
        .navigationBarBackButtonHidden(true)
        .frame(maxWidth: .infinity, maxHeight: .infinity)
    }
    .edgesIgnoringSafeArea(.all)
}

这是其他屏幕中的菜单按钮，调用菜单：

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

我需要它是这样的：

现在我有这个：

Answer 1

有一个函数，名为 presentationBackground(_:) 可能会满足你的期望：

private func makeMenuButton() -> some View {
    ...
    .fullScreenCover(isPresented: $isMenuPresented) {
        ZStack {
            Menu_VW(item: .locations)
        }
        .presentationBackground(.black.opacity(0.5)) //<- here
    }
}

更新：由于您需要支持16.4以下的iOS，因此此解决方案可以提供帮助。由于

NavigationView

已被弃用，您可以考虑使用

NavigationStack

来代替。

struct TransparentBackgroundView: UIViewRepresentable {
    func makeUIView(context: Context) -> UIView {
        let view = UIView()
        DispatchQueue.main.async {
            view.superview?.superview?.backgroundColor = UIColor.black.withAlphaComponent(0.5) //<- this line do the trick
        }
        return view
    }
}

然后您需要在 MenuView 中应用

NavigationView

和嵌套的

ZStack

：

var body: some View {
    NavigationView {
        GeometryReader { geo in
            ZStack(alignment: .center) {
                ...
            }
            .background(TransparentBackgroundView()) //<- here
        }
    }
    .background(TransparentBackgroundView()) //<- here
}