ほへと

ナビゲーションコンテナを使用してアプリのユーザーインターフェースに構造を提供し、ユーザーがアプリの各部分間を簡単に移動できるようにします。
たとえば、NavigationStackを使用してビューのスタック内を前後に移動したり、TabViewを使用してタブバーから表示するビューを選択したりできます。

ほへと

NavigationSplitView

概要

2 列または 3 列でビューを表示するビュー。

@MainActor @preconcurrency
struct NavigationSplitView<Sidebar, Content, Detail> where Sidebar : View, Content : View, Detail : View

SlidebarとContent, DetailがどれもViewを継承している必要がある

2列のViewを構成する

2 列または 3 列のナビゲーション分割ビューを作成し、通常はそれをシーンのルートビューとして使用します。先頭の列で 1 つ以上の項目を選択すると、後続の列にそれらの項目の詳細が表示されます。

@State private var employeeIds: Set<Employee.ID> = []

var body: some View {
    NavigationSplitView {
        List(model.employees, selection: $employeeIds) { employee in
            Text(employee.name)
        }
    } detail: {
        EmployeeDetails(for: employeeIds)
    }
}

上記の例では、ナビゲーション分割ビューは最初の列のリストと調整されるため、ユーザーが選択を行うと、詳細ビューがそれに応じて更新されます。

3列のViewを構成する

3 列のビューを作成するには、init(sidebar:content:detail:) 初期化子を使用します。最初の列の選択は 2 番目の列に影響し、2 番目の列の選択は 3 番目の列に影響します。たとえば、部門のリスト、選択した部門の従業員のリスト、および選択したすべての従業員の詳細を表示できます。

@State private var departmentId: Department.ID? // Single selection.
@State private var employeeIds: Set<Employee.ID> = [] // Multiple selection.

var body: some View {
    NavigationSplitView {
        List(model.departments, selection: $departmentId) { department in
            Text(department.name)
        }
    } content: {
        if let department = model.department(id: departmentId) {
            List(department.employees, selection: $employeeIds) { employee in
                Text(employee.name)
            }
        } else {
            Text("Select a department")
        }
    } detail: {
        EmployeeDetails(for: employeeIds)
    }
}

列にNavigationStackを埋め込むこともできる

NavigationSplitViewVisibility

・detailOnly
→最後の列以外を非表示にする
・doubleColumn
→3列の場合、先頭列を非表示にする
・all
→すべての列を表示する
automatic

@State private var employeeIds: Set<Employee.ID> = []
@State private var columnVisibility =
    NavigationSplitViewVisibility.detailOnly

var body: some View {
    NavigationSplitView(columnVisibility: $columnVisibility) {
        List(model.employees, selection: $employeeIds) { employee in
            Text(employee.name)
        }
    } detail: {
        EmployeeDetails(for: employeeIds)
    }
}

幅を変更する

ほへと

NavigationLink

概要

ナビゲーションリンクをクリックまたはタップすると、NavigationStack または NavigationSplitView 内にビューが表示されます。リンクのラベルクロージャにビューコンテンツを提供することで、リンクの外観を制御します。たとえば、ラベルを使用してリンクを表示できます。

NavigationStack, NavigationSplitView内でNavigationLinkを記載することが必要

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

NavigationLinkのクロージャで、遷移先を初期化する

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

型に基づいて特定のViewを表示する

提示されたデータ値に基づいてナビゲーションを実行することもできます。ビューをデータの種類に関連付け、ナビゲーションリンクからそのデータ型の値を提示します。

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

以下のメリットがある
・遷移先の処理を一箇所でかけるので、コードが簡潔になる
・異なる型に対して異なる詳細ビューを簡単に定義できる

遷移先Viewが同じで、初期化値が異なる場合は、積極的に使用したい

ほへと

NavigationStack

概要

ルートビューを表示し、ルートビューの上に追加のビューを表示できるようにするビュー。
スタックには常に、削除されていない最新のビューが表示され、ルートビューを削除することはできません。

NavigationStack {
    List(parks) { park in
        NavigationLink(park.name, value: park)
    }
    .navigationDestination(for: Park.self) { park in
        ParkDetails(park: park)
    }
}

この例では、List がルートビューとして機能し、常に存在します。リストからナビゲーションリンクを選択すると、ParkDetails ビューがスタックに追加され、リストが覆われます。戻ると詳細ビューが削除され、リストが再び表示されます。スタックが空でルートビュー、つまりリストが表示されている場合、システムは後方ナビゲーションコントロールを無効にします。

画面スタックをコードで管理する

デフォルトでは、ナビゲーションスタックはスタック上のビューを追跡するために状態を管理します。ただし、作成したデータ値のコレクションへのバインディングを使用してスタックを初期化することで、コードで状態の制御を共有できます。スタックは、スタックにビューを追加するときにコレクションに項目を追加し、ビューを削除するときに項目を削除します。

@State private var presentedParks: [Park] = []

NavigationStack(path: $presentedParks) {
    List(parks) { park in
        NavigationLink(park.name, value: park)
    }
    .navigationDestination(for: Park.self) { park in
        ParkDetails(park: park)
    }
}

状態を空の配列として初期化すると、スタックにビューがないことを示します。以前と同様に、誰かが公園のナビゲーションリンクをタップまたはクリックすると、スタックは関連付けられた公園データを使用して ParkDetails ビューを表示します。ただし、スタックは公園データを presentationParks 配列にも配置します。コードでこの配列を観察して、現在のスタック状態を読み取ることができます。また、配列を変更してスタック上のビューを変更することもできます。

func showParks() {
    presentedParks = [Park("Yosemite"), Park("Sequoia")]
}

showParks メソッドは、スタックの表示を、新しい presentationParks 配列の最後の項目である Sequoia の詳細を表示するビューに置き換えます。そのビューから戻ると、配列から Sequoia が削除され、Yosemite の詳細を表示するビューが表示されます。パスを使用して、ディープリンク、状態の復元、またはその他の種類のプログラムによるナビゲーションをサポートします。

NavigationPath

複数の種類のデータを含むプログラムによるナビゲーションのパスを作成するには、NavigationPath インスタンスをパスとして使用できます。
ナビゲーションスタックの内容を表す、型が消去されたデータのリスト。

struct NavigationPath

1 つのスタックにさまざまな種類のデータを表示する必要がある場合は、代わりにナビゲーションパスを使用します。パスは型消去を使用するため、異種要素のコレクションを管理できます。パスには、データ要素の追加、カウント、および削除を行う通常のコレクションコントロールも用意されています。

基本的な使い方が載っている

遷移先が複数の型を持つ場合、NavigationPathを使って、プログラムから操作できる

このスクラップは6ヶ月前にクローズされました

SwiftUIの遷移処理を知りたい我

Navigation概要