带有按钮的 SwiftUI 导航链接

在 SwiftUI 中，我们通常使用 NavigationLink 来进行页面之间的导航。但是，在某些情况下，我们希望在导航链接的同时，还能够使用按钮进行某些操作。因此，本文将向您介绍如何实现带有按钮的 SwiftUI 导航链接。

步骤

1. 创建链接和按钮

首先，我们需要创建一个带有链接和按钮的视图。在这个例子中，我们将使用一个按钮来完成一个特定的任务，并在完成后转到另一个视图。

struct ContentView: View {
    @State private var isPresented = false
    
    var body: some View {
        NavigationView {
            VStack {
                Button(action: {
                    // 执行任务
                    self.isPresented = true
                }, label: {
                    Text("完成任务")
                })
                
                NavigationLink(destination: DetailView(), isActive: $isPresented) {
                    EmptyView()
                }
            }
        }
    }
}

在这个视图中，我们使用一个名为 isPresented 的布尔状态来控制我们的导航链接。

2. 创建详细视图

接下来，我们需要创建我们要导航到的详细视图。

struct DetailView: View {
    var body: some View {
        Text("详细视图")
    }
}

比较简单，这里就不再具体介绍。

预览

现在，我们可以看到我们的导航链接和按钮都一起工作了。当我们点击“完成任务”按钮时，我们的任务将被执行，然后我们将自动导航到我们的详细视图。

解释

这里用到了 SwiftUI 中的 NavigationLink 组件和 isActive 属性。在我们的 ContentView 视图里，我们创建了一个名为 isPresented 的布尔状态，它会控制我们的 NavigationLink 是否应该被激活。然后，我们将这个状态绑定到我们的 NavigationLink 组件的 isActive 属性上。最后，我们使用 EmptyView 来占位，因为 NavigationLink 必须包含一个可绘制的实例。

重要的是要注意，我们没有直接在按钮中激活 NavigationLink，而是使用一个布尔状态来完成这项工作。这样做的原因是，如果我们直接在按钮中激活导航链接，那么在执行完任务之前，我们将无法看到详细视图。而使用布尔状态来控制导航链接，我们可以等待任务完成后再转到详细视图。

结论

现在，您可以使用上述步骤在 SwiftUI 中创建带有按钮的导航链接。这可以帮助您在某些情况下实现更多的交互和用户控制。感谢您的阅读，希望对您有所帮助！