显示自定义弹出窗口时的 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.

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

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 导航栏外观和功能的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！

1403页，肝出来的..