構造体

NavigationLink

ナビゲーションのプレゼンテーションを制御するビュー。

宣言

struct NavigationLink<Label, Destination> where Label : View, Destination : View

概観

ユーザはナビゲーションリンクをクリックまたはタップして、NavigationView 内にビューを表示します。リンクの末尾のクロージャ内にビューコンテンツを提供することで、リンクの視覚的な外観を制御します。たとえば、Label を使用してリンクを表示できます。

NavigationLink(destination: FolderList(id: workFolder.id)) {

Label("Work Folder", systemImage: "folder")

}

テキストのみで構成されるリンクの場合、文字列を受け取り、Text ビューを作成するコンビニエンスイニシャライザの 1 つを使用できます。

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

宛先ビューでリンクを初期化してナビゲーションを実行します。たとえば、カラーサンプルを表示する ColorDetail ビューについて考えてみます。

struct ColorDetail: View {

var color: Color

var body: some View {

color

.frame(width: 200, height: 200)

.navigationTitle(color.description.capitalized)

}

以下の NavigationView は、カラー詳細ビューへの 3 つのリンクを現しています。

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.

}

オプションで、ナビゲーションリンクを使用してプログラムでナビゲーションを実行できます。これは、以下の 2 つの方法のいずれかで行います。

リンクの isActive パラメータをブール値に結束します。値を true に設定すると、ナビゲーションが実行されます。

リンクの selection パラメータを値に結束し、変数の型の tag タグを提供します。selection の値を tag に設定すると、ナビゲーションが実行されます。

たとえば、前の例の紫色のページがいつ表示されるかを示す State 変数を作成できます。

@State private var shouldShowPurple = false

そして、紫色のナビゲーションリンクを変更して、state 変数に結束できます。

NavigationLink(

"Purple",

destination: ColorDetail(color: .purple),

isActive: $shouldShowPurple)

コードの他のどこの場所で shouldShowPurple を true に設定しても、ナビゲーションリンクがアクティブになります。

トピックス

宛先ビューの提示

init(LocalizedStringKey, destination: () -> Destination)

リンクがローカライズされた文字列キーから生成するテキストラベルを使用して、宛先ビューを表示するナビゲーションリンクを作成します。

Label が Text で、Destination(宛先) が View に準拠している場合に使用できます。

init<S>(S, destination: () -> Destination)

リンクがタイトルの文字列から生成するテキストラベルを使用して、宛先ビューを表示するナビゲーションリンクを作成します。

Label が Text で、Destination(宛先) が View に準拠している場合に使用できます。

init(destination: () -> Destination, label: () -> Label)

宛先ビューを表示するナビゲーションリンクを作成します。

init(destinationName: String, label: () -> Label)

WatchKit のストーリーボードからビューを表示するナビゲーションリンクを作成します。

Label が View に準拠し、Destination が _WKStoryboardContent である場合に使用できます。

プログラムによるアクティベーションを使用した宛先ビューの提示

init(LocalizedStringKey, isActive: Binding<Bool>, destination: () -> Destination)

リンクが、ローカライズされた文字列キーから生成するテキストラベルを使用して、アクティブな時に宛先ビューを表示するナビゲーションリンクを作成します。

Label が Text で、Destination が View に準拠している場合に使用できます。

init<S>(S, isActive: Binding<Bool>, destination: () -> Destination)

リンクが、タイトル文字列から生成するテキストラベルを使用して、アクティブな時に宛先ビューを表示するナビゲーションリンクを作成します。

Label が Text で、Destination が View に準拠している場合に使用できます。

init(isActive: Binding<Bool>, destination: () -> Destination, label: () -> Label)

アクティブなときに宛先ビューを表示するナビゲーションリンクを作成します。

init(destinationName: String, isActive: Binding<Bool>, label: () -> Label)

アクティブな時に WatchKit ストーリーボードからのビューを表示するナビゲーションリンクを作成します。

Label が View・に準拠し、Destination が _WKStoryboardContent の時利用できます。

選択可能な宛先ビューの提示

init<V>(LocalizedStringKey, tag: V, selection: Binding<V?>, destination: () -> Destination)

リンクがローカライズされた文字列キーから生成するテキストラベルを使用して、結束された選択変数が、あなたが提供した値と一致した時に宛先ビューを表示するナビゲーションリンクを作成します。

Label が Text で、Destination が View に準拠している場合に使用できます。

init<S, V>(S, tag: V, selection: Binding<V?>, destination: () -> Destination)

リンクがタイトル文字列から生成するテキストラベルを使用して、結束された選択変数が、あなたが提供した値と一致した時に宛先ビューを表示するナビゲーションリンクを作成します。

Label が Text で、Destination が View に準拠している場合に使用できます。

init<V>(tag: V, selection: Binding<V?>, destination: () -> Destination, label: () -> Label)

結束された選択変数が与えられたタグの値と等しい場合に宛先ビューを表示するナビゲーションリンクを作成します。

init<V>(destinationName: String, tag: V, selection: Binding<V?>, label: () -> Label)

結束された選択変数が、あなたが提供した値と一致した時に、WatchKit ストーリーボードからのビューを表示するナビゲーションリンクを作成します。

Label が View に準拠し Destination が _WKStoryboardContent である場合に使用できます。

リンクの構成

func isDetailLink(Bool) -> some View

ナビゲーションリンクを設定して、宛先を含まれているナビゲーションビューの詳細コンポーネントとして表示します。

Label が View に準拠し、Destination が View に準拠している場合に使用できます。

標準の修飾子の適用

View の修飾子

標準の修飾子を適用して、このビューとそれに含まれるビューを構成します。