[英]SwiftUI navigation bar appearance and functionality when custom popup shows
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?有没有办法实现与内置警报修改器相同的功能和外观?
Example project code示例项目代码
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)
}
}
Thanks for your help!谢谢你的帮助!
Add in the last.最后加入。 Add
showPopup
in the last of the NavigationView在 NavigationView 的最后添加
showPopup
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
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.