自定义弹出窗口显示时的 SwiftUI 导航栏外观和功能

SwiftUI navigation bar appearance and functionality when custom popup shows(自定义弹出窗口显示时的 SwiftUI 导航栏外观和功能)

问题描述

我正在尝试显示一个自定义弹出窗口，当它显示时，我需要禁用背景并将其变暗，就像在内置警报功能中所做的那样.但是，当视图中有导航栏时，彩色图层不能放在导航栏上方.

I am trying to show a custom popup, and while that is showing, I'd need to disable and darken the background just as it is done in the built-in alert functionality. However, when there is a navigation bar in the view, the coloured layer can't be put on top of the navigation bar.

所需的结果就像在内置警报修改器中所做的那样，使整个背景变暗(使用导航栏)，同时禁用与背景(和导航栏)交互的能力.

The desired outcome would be just as it is done in the built-in Alert modifier, to darken the whole background (with navbar), while disabling the ability to interact with the background (and the navbar).

有没有办法实现与内置警报修饰符相同的功能和外观?

Is there a way to achieve the same functionality and appearance as in with the built-in Alert modifier?

示例项目代码

import SwiftUI

struct ContentView: View {
    @State private var isShowingPopup = false
    
    var body: some View {
        NavigationView {
            VStack {
                Text("Just a random text")
                    .padding(.bottom, 100)
                Button("Show popup") {
                    isShowingPopup = true
                }
            }
            .showPopup(isActive: isShowingPopup, action: { isShowingPopup = false })
            .navigationBarTitle("Test navbar", displayMode: .inline)
            .navigationBarItems(
                trailing: Button(
                    action: { print("profile tapped")},
                    label: {
                        Text("Profile")
                    }
                )
            )
        }
    }
}

extension View {
    func showPopup(
        isActive: Bool,
        action: @escaping () -> Void
    ) -> some View {
        ZStack {
            self
            if isActive {
                Color.black
                    .frame(maxWidth: .infinity, maxHeight: .infinity)
                    .edgesIgnoringSafeArea(.all)
                    .opacity(0.51)
                    .zIndex(1)
                Popup(action: action)
                    .zIndex(2)
            }
        }
    }
}

struct Popup: View {
    let action: () -> Void
    
    var body: some View {
        VStack {
            Text("This is a popup")
                .foregroundColor(.black)
                .padding()
            Button("OK", action: action)
                .foregroundColor(.blue)
        }
        .background(Color.white)
        .cornerRadius(8)
    }
}

感谢您的帮助！

推荐答案

最后添加.在 NavigationView 的最后添加 showPopup

Add in the last. Add showPopup in the last of the NavigationView

NavigationView {
    VStack {
        Text("Just a random text")
            .padding(.bottom, 100)
        Button("Show popup") {
            isShowingPopup = true
        }
    }
    
    .navigationBarTitle("Test navbar", displayMode: .inline)
    .navigationBarItems(
        trailing: Button(
            action: { print("profile tapped")},
            label: {
                Text("Profile")
            }
        )
    )
}
.showPopup(isActive: isShowingPopup, action: { isShowingPopup = false }) //<---Here

这篇关于自定义弹出窗口显示时的 SwiftUI 导航栏外观和功能的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持编程学习网！