簡體   English   中英

在視圖層次結構頂部顯示自定義彈出視圖 ~ SwiftUI

[英]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.

 
粵ICP備18138465號  © 2020-2024 STACKOOM.COM