如何在 SwiftUI 中使用带有条件检查的按钮进行导航

Question

由于导航按钮不再可用，如何检查导航链接中的条件以导航到另一个视图？

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))
}
}
}

要记住的一件事是，导航链接本身就是一个按钮，当按下它时，导航到destinationView，isActive参数是一种强制发生这种情况的方法(无需用户单击导航链接)。到目前为止，我不确定如何将逻辑嵌入到导航链接中。

希望这对:)有所帮助

编辑：

您可以做的另一件事如下：

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

这将禁用导航链接，直到两个输入字段都不为空。

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导航到哪个视图，请确保使用AnyViewfor 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 的目的地，并添加一个警报，该警报也具有自定义BindingisPresented：

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

您可以将此警报添加到视图中包含您正在评估的变量的任何子视图(在本例中为ContentView)。