NavigationLink

Overview 概要

Users click or tap a navigation link to present a view inside a NavigationView. You control the visual appearance of the link by providing view content in the link’s trailing closure. For example, you can use a Label to display a link:

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

For a link composed only of text, you can use one of the convenience initializers that takes a string and creates a Text view for you:

NavigationLink("Work Folder", destination: FolderList(id: workFolder.id))

Perform navigation by initializing a link with a destination view. For example, consider a ColorDetail view that displays a color sample:

struct ColorDetail: View {
    var color: Color


    var body: some View {
        color
            .frame(width: 200, height: 200)
            .navigationTitle(color.description.capitalized)
    }
}

The following NavigationView presents three links to color detail views:

NavigationView {
    List {
        NavigationLink("Purple", destination: ColorDetail(color: .purple))
        NavigationLink("Pink", destination: ColorDetail(color: .pink))
        NavigationLink("Orange", destination: ColorDetail(color: .orange))
    }
    .navigationTitle("Colors")


    Text("Select a Color") // A placeholder to show before selection.
}

Optionally, you can use a navigation link to perform navigation programmatically. You do so in one of two ways:

• Bind the link’s isActive parameter to a Boolean value. Setting the value to true performs the navigation.

• Bind the link’s selection parameter to a value and provide a tag of the variable’s type. Setting the value of selection to tag performs the navigation.

For example, you can create a State variable that indicates when the purple page in the previous example appears:

@State private var shouldShowPurple = false

Then you can modify the purple navigation link to bind to the state variable:

NavigationLink(
    "Purple",
    destination: ColorDetail(color: .purple),
    isActive: $shouldShowPurple)

If elsewhere in your code you set shouldShowPurple to true, the navigation link activates.