[英]Show custom popup view on top of view Hierarchy ~ SwiftUI
由於自定義彈出視圖完美顯示但是在顯示彈出視圖時也啟用了導航視圖后退按鈕。 那么,是否可以像我們通常在 swift 中那樣在視圖層次結構的頂部顯示自定義彈出視圖
guard let window : UIWindow = UIApplication.shared.windows.filter({$0.isKeyWindow}).first else {return}
var presentVC = window.rootViewController
while let next = presentVC?.presentedViewController {
presentVC = next
}
源代碼:
struct LogInView: View {
@State private var email: String = ""
@State private var isShowPopup: Bool = false
@Binding var showSelfView: Bool
var body: some View {
ZStack {
VStack(alignment: .leading, spacing: 30) {
// Top
VStack(alignment: .leading, spacing: 10) {
Text("Login")
.font(.title).bold()
.foregroundColor(Design.Theme.PrimaryTextColor)
Text("Please enter your password to log in to your VaultsPay account")
.font(.headline)
.fontWeight(.regular)
.foregroundColor(Design.Theme.SecondaryTextColor)
}
// TextFields
VStack(spacing: 15) {
TextField("Email", text: $email)
.keyboardType(.emailAddress)
.textFieldStyle(.plain)
.padding(.horizontal, 12)
.frame(height: 55)
.background(
Design.Theme.TextFieldBackgroundColor.cornerRadius(15)
)
TextField("Password", text: $email)
.keyboardType(.emailAddress)
.textFieldStyle(.plain)
.frame(height: 55)
.padding(.horizontal, 12)
.background(
Design.Theme.TextFieldBackgroundColor.cornerRadius(15)
)
}
Button(action: {
withAnimation {
self.isShowPopup.toggle()
}
}) {
Text("Login")
.font(.title3).bold()
.foregroundColor(Design.Theme.WhiteTextColor)
.frame(height: 55)
.frame(maxWidth: .infinity)
.background(Design.Theme.SecondaryBackgroundColor)
.cornerRadius(15)
.opacity(0.4)
}
HStack(alignment: .center) {
Button(action: {
self.showSelfView = false
}) {
Text("Forgot Password?")
.font(.headline).bold()
.foregroundColor(Design.Theme.TertiaryTextColor)
.frame(width: 200, height: 25)
}
.frame(maxWidth: .infinity)
}
Spacer()
} //: Main VSTACK
.padding(.horizontal)
.navigationBarTitleDisplayMode(.inline)
.toolbar {
ToolbarItem(placement: .principal) {
Image(Design.Icon.AppLogo)
.scaledToFit()
}
}
if self.isShowPopup {
GeometryReader { _ in
ConfirmationDialog()
.frame(maxWidth: .infinity, maxHeight: .infinity)
.padding(.horizontal, 35)
}
.background(
Color.black.opacity(0.65)
.edgesIgnoringSafeArea(.all)
.onTapGesture {
withAnimation {
self.isShowPopup.toggle()
}
}
)
}
}
}
處理自定義彈出視圖的源代碼:
if self.isShowPopup {
GeometryReader { _ in
ConfirmationDialog()
.frame(maxWidth: .infinity, maxHeight: .infinity)
.padding(.horizontal, 35)
}
.background(
Color.black.opacity(0.65)
.edgesIgnoringSafeArea(.all)
.onTapGesture {
withAnimation {
self.isShowPopup.toggle()
}
}
)
}
問題截圖:
提前致謝。 期待您的幫助。
在VStack
的底部,添加修飾符.navigationBarBackButtonHidden()
。
...
} //: Main VSTACK
.padding(.horizontal)
.navigationBarBackButtonHidden(isShowPopup) // <- Here
.navigationBarTitleDisplayMode(.inline)
.toolbar {
...
我知道這是一個老問題,但在 swift ui 中搜索了很多實現彈出窗口,我發現的每件事都有問題,無論是導航欄,屏幕的后退按鈕大小,直到我找到以下鏈接。 https://johncodeos.com/how-to-create-a-popup-window-with-swiftui/
簡單地創建一個彈出視圖並根據綁定變量顯示和隱藏它。 像下面這樣在 ZStack 中調用這個 Popup 視圖 - 很高興找到這個!!! 希望它也能幫助其他人!!!
struct ComtentView: View {
@State var selection: Bool = false
var body: some View {
ZStack{
NavigationView {
...... your custom code
Button {
print("button is tapped")
self.selection = true
}
Popupview (show: $selection)
}
}
}
struct PopupView: View {
@Binding var show:Bool
.... your custom code
}
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.