SwiftUI – 画面の移動したい(NavigationStack)

SwiftUIのナビゲーション機能を使った画面の移動は、3パターンしかありません。

ナビゲーションを使うには決まりがあります。
NavigationStack で包む。
NavigationStack は1つ。
です。

1.フラグで画面移動

フラグをOnにすると、画面移動します。
これはよく使う方法ですね。
フラグ管理になるので、1つのビューで複数の画面移動するような処理を行う時は、よく考えないとコードが汚れていきます。

        @State private var showDetail = false
    
        NavigationStack {
            Button("詳細へ(フラグ管理)") {
                showDetail = true
            }
            .navigationDestination(isPresented: $showDetail) {
                DetailView()
            }
        }

2.タッチして画面移動(簡易)

これも分かりやすいです。タッチしたら指定した画面に移動できます。

        NavigationStack {
            NavigationLink("詳細へ(NavigationLink)") {
                // 遷移先のビューを設定
                DetailView()
            }
        }

3.タッチして画面移動(高機能)

タッチしたら画面移動します。
画面移動の履歴管理に配列を使ってます。
勘のいい人はわかると思いますが、配列を使っているので画面戻る機能が拡張できます。
配列なので、一気に最初の画面に戻ったり、2つ前の画面に戻ったりできます。

enum Route: Hashable {
    case detail
    case result
}

struct ContentView: View {
    // ここにデータを入れると 自動で遷移 します
    @State private var path: [Route] = []
    
    var body: some View {
        // NavigationStack で監視
        NavigationStack(path: $path) {
            Button("詳細へ(Path)") {
                path.append(Route.detail)
            }
            // ルーティング
            .navigationDestination(for: Route.self) { route in
                switch route {
                case .detail:
                    DetailView2(path: $path)
                case .result:
                    ResultView(path: $path)
                }
            }
        }        
    }
}

struct DetailView2: View {
    @Binding var path: [Route]
    
    var body: some View {
        Text("DetailView2")
        
        Button("結果画面へ(Path)") {
            path.append(Route.result)
        }
    }
}

struct ResultView: View {
    @Binding var path: [Route]
    
    var body: some View {
        Text("ResultView")
        
        Button("最初の画面へ戻る") {
            path.removeAll()
        }
    }
}

コメント

タイトルとURLをコピーしました