SwiftUI-NavigationLink

人们单击或点击导航链接以在NavigationStack或NavigationSplitView中显示视图。通过在链接的标签闭包中提供视图内容，可以控制链接的视觉外观。例如，你可以使用一个Label去显示链接：

NavigationLink {
    FolderDetail(id: workFolder.id)
} label: {
    Label("Work Folder", systemImage: "folder")
}

对于仅由文本组成的链接，您可以使用一个方便的初始化器，它接受字符串并为您创建文本视图：

NavigationLink("Work Folder") {
    FolderDetail(id: workFolder.id)
}

链接到目标视图

您可以通过初始化您在destination闭包中提供的目标视图的链接来执行导航。例如，考虑一个用颜色填充自己的Color视图：

struct ColorDetail: View {
    var color: Color

    var body: some View {
        color.navigationTitle(color.description)
    }
}

以下Navigation提供了三个颜色细节视图的链接：

NavigationStack {
    List {
        NavigationLink("Mint") { ColorDetail(color: .mint) }
        NavigationLink("Pink") { ColorDetail(color: .pink) }
        NavigationLink("Teal") { ColorDetail(color: .teal) }
    }
    .navigationTitle("Colors")
}

创建演示文稿链接

或者，您可以使用导航链接根据显示的数据值执行导航。要支持这一点，请使用导航堆栈中的navigationDestination（for：destination：）视图修饰符将视图与一种数据相关联，然后从导航链接中显示该数据类型的值。以下示例将前一个示例重新实现为一系列演示链接：

NavigationStack {
    List {
        NavigationLink("Mint", value: Color.mint)
        NavigationLink("Pink", value: Color.pink)
        NavigationLink("Teal", value: Color.teal)
    }
    .navigationDestination(for: Color.self) { color in
        ColorDetail(color: color)
    }
    .navigationTitle("Colors")
}

将视图与数据分开有助于编程导航，因为您可以通过记录显示的数据来管理导航状态。

以编程方式控制演示文稿链接

要以编程方式导航，请引入一个状态变量来跟踪堆栈上的项目。例如，您可以创建一个颜色数组来存储上一个示例中的堆栈状态，并将其初始化为空数组，以从空堆栈开始：

@State private var colors: [Color] = []

然后将Binding传递到状态到导航堆栈：

NavigationStack(path: $colors) {
    // ...
}

您可以使用数组来观察堆栈的当前状态。您还可以修改数组以更改堆栈的内容。例如，您可以使用以下方法以编程方式将blue添加到数组中，并导航到新的颜色详细信息视图：

func showBlue() {
    colors.append(.blue)
}

与列表协调

您还可以使用导航链接来控制Navigation中的List选择：

let colors: [Color] = [.mint, .pink, .teal]
@State private var selection: Color? // Nothing selected by default.

var body: some View {
    NavigationSplitView {
        List(colors, id: \.self, selection: $selection) { color in
            NavigationLink(color.description, value: color)
        }
    } detail: {
        if let color = selection {
            ColorDetail(color: color)
        } else {
            Text("Pick a color")
        }
    }
}

列表与导航逻辑协调，以便更改代码另一部分中的选择状态变量激活具有相应颜色的导航链接。同样，如果有人选择与特定颜色关联的导航链接，列表会更新代码其他部分可以读取的选择值。