如何使用 SwiftUI 中的條件檢查按鈕進行導航

Question

由於NavigationButton不再可用，如何檢查NavigationLink中的條件以導航到另一個視圖？

NavigationLink(destination: Dashboard(userName: self.userId, 
                                      password: self.password), isActive: $showDashboard) {

                    Button(action: {
                        if self.userId.isEmpty || self.password.isEmpty {
                            self.isAlert = true
                        } else {
                            self.showDashboard = true
                        }

                    }) {
                        Text("Submit")
                            .foregroundColor(.white)
                            .font(.system(size: 22))

                        Dashboard()
                    }
                    .frame(minWidth: 150, idealWidth: 300, maxWidth: 450, 
                     minHeight: 30, idealHeight: 40, maxHeight: 50, alignment: .center)
                    .background(Color(red: 81/255, green: 221/255, blue: 182/255))

                    .padding([.leading, .trailing], 20)
                } 

編輯：-

另外，如果用戶名和密碼的長度超過 16，我想顯示警報，如果長度超過 10，則顯示不同的警報，如果長度為 0，則顯示空消息警報。

Answer 1

你可以這樣做：

    NavigationView {
        VStack {
            NavigationLink(destination:  Dashboard(userName: self.userId, password: self.password), isActive: $showDashboard) {
                Text("")
            }
            Button(action: {
                 if self.userId.isEmpty || self.password.isEmpty {
                      self.isAlert = true
                  } else {
                      self.showDashboard = true
                  }
            }) {
                Text("Submit")
                    .foregroundColor(.green)
                    .font(.system(size: 22))

            }
        }
    }

要記住的一點是 NavigationLink 本身就是一個按鈕，當按下它時導航到destinationView ， isActive參數是一種強制發生這種情況的方法（無需用戶單擊 NavigationLink）。 截至目前，我不確定如何將邏輯嵌入到 NavigationLinks 中。

希望這可以幫助：）

編輯：

您可以做的另一件事是：

NavigationLink(destination:Dashboard(userName: self.userId, password: self.password)) {
                    Text("Submit")
                }.disabled(self.userId.isEmpty || self.password.isEmpty )

這將禁用 NavigationLink，直到兩個輸入字段都不為空。

Answer 2

我不確定您是否要檢查條件以確定NavigationLink的目的地或它是否被禁用，但此示例代碼顯示了如何同時執行這兩種操作：

struct ContentView: View {
    @State var userId = ""
    @State var password = ""

    var body: some View {
        NavigationView {
            NavigationLink(destination: (self.userId.isEmpty || self.password.isEmpty) ? AnyView(Dashboard(userName: self.userId, password: self.password)) : AnyView(Text("Different view")), isActive: Binding(get: {
                return self.userId.isEmpty || self.password.isEmpty
            }, set: { (_) in

            })) {
                Text("Navigate")
            }
        }
    }
}

為isActive創建一個自定義綁定以評估多個條件：

Binding(get: {
        return self.userId.isEmpty || self.password.isEmpty
}, set: { (_) in

})

並評估三元語句中的條件，如果您希望條件確定NavigationLink導航到哪個視圖，請確保使用AnyView for Type Erasure 返回不同類型的視圖：

(self.userId.isEmpty || self.password.isEmpty) ? AnyView(Dashboard(userName: self.userId, password: self.password) : AnyView(Text("Different view"))

編輯：如果條件評估為false ，如果您不希望視圖轉換為任何內容，則可以將其他視圖設置為nil ：

(self.userId.isEmpty || self.password.isEmpty) ? AnyView(Dashboard(userName: self.userId, password: self.password) : nil

編輯 2 ：如果您希望在條件失敗時顯示警報，請使用上述行（帶有nil ）作為 NavigationLink 的目的地，並添加一個警報，該警報也具有isPresented的自定義Binding ：

.alert(isPresented: Binding(get: {
            return self.userId.isEmpty || self.password.isEmpty
    }, set: { (_) in

    })) {
        Text("Alert message")
    }

您可以使用您正在評估的變量（在本例中為ContentView ）將此警報添加到視圖中的任何子視圖。