[SwiftUI📱]NavigationStackで簡単に画面遷移

こんにちは。
今回はSwiftUIで開発をしていた際にNavigationがかなり使いやすくなっていたので紹介したいと思います。

NavigationStackとは🤔

最近のWWDC2022にて発表されたNavigationStackですが、あまり触れれてなかったので試してみたところ画面遷移が簡単にできたので開発が楽になったと思います。
実際にどのように遷移していくのか書いていきたいと思います。

導入

1. modelを作成する
   まずはmodelの作成します。
   modelを下記のようの設定してください↓

let sample:[Sample] = [
        .init(name: "aaa"),
        .init(name: "bbb"),
        .init(name: "ccc"),
        .init(name: "ddd"),
        .init(name: "eee"),
]

2. NavigationStackを導入
   次にNavigationStackの設定をしていきます。

var body: some View {
        NavigationStack {
            List(sample){sample in
                    NavigationLink(sample.name,value: sample)
                
            }.navigationDestination(for: Sample.self) { sample in
                    Text(sample.name) 
            }
        }
 }

3. pathの設定
   最後にpathの設定をしていきます。

@State var path:[Sample] = []

pathは定義する必要があります。上記のように設定をしなければうまく動作しません

NavigationStack(path: $path)

NavigationStackに先ほど定義したpathを渡します。

Text(sample.name)
Button("戻る") {
    path = []
}

最後にButtonのactionに追加したら完成です！！🥳

まとめ

今回のNavigationStackの発表によりNavigationの開発がかなり楽になったと思います。これからSwiftUIがどんどん進化していくのが楽しみです。
完全にSwiftUIに移行はまだ先の話だと思いますが、もっと便利に開発できたら嬉しいですね🤩