見出し画像

複数扱うNavigationLinkを綺麗にまとめる方法

こんにちは! りーさんです。
1画面で複数遷移する時ってありますよね。。
そんな時にNavigationLinkがあちらこちらにあり、コードが見にくくなったりするので見やすくしてみましょう!


class HogeView {

 var body: some View {
   NavigationView {
      contentView
         .background(navigationLinks)
   }
 }

 var contentView: some View {
   Text("hogehoge")
 }
}

extension HogeView {
    private var navigationLinks: some View {
        Group {
            NavigationLink(
                destination: MenuView1(),
                isActive: $viewModel.isShow1
            ) {
                EmptyView()
            }

            NavigationLink(
                destination: MenuView2(),
                isActive: $viewModel.isShow2
            ) {
                EmptyView()
            }

            NavigationLink(
                destination: MenuView3(),
                isActive: $viewModel.isShow3
            ) {
                EmptyView()
            }

            NavigationLink(
                destination: MenuView4(),
                isActive: $viewModel.isShow4
            ) {
                EmptyView()
            }
        }
    }
}

こんな感じにNavigationLinkだけをまとめてあげて、
遷移させてあげれば良さそうですね!

コメントも追加したりして、どこの導線か書いたりすれば初見の人も見やすいかもです。

いいなと思ったら応援しよう!