SwiftUI 画面遷移のベストプラクティス 2024.6

背景

タブ切り替えできるアプリで、それぞれのタブが独立して遷移可能にしたかった。
例)Twitterの検索タブで検索した後にホームに行き、また検索タブをタップすると、さっき検索した画面がそのまま表示される。

方法

TabViewとNavigationStackを組み合わせて、スタイリッシュに作る

タブごとにRouterを作る(1/4)

class HomeRouter: ObservableObject {
  @Published var items: [Item] = []
  enum Item: Hashable {
    case toNext //おすすめは遷移先のView名
  }
}

(2/4)

//ここでログイン分岐処理とか
struct ContentView: View {
  var body: some View {
    MainTabView()

TabViewの子ViewにEnvironmentObjectとしてRouterを渡す(3/4)

struct MainTabView: View {
  @StateObject var homeRouter = HomeRouter()
  @StateObject var profileRouter = ProfileRouter()
  var body: some View {
    TabView{
      HomeView()
        .tabItem {
          Label("Home", systemImage: "house")
        }
        .environmentObject(homeRouter)
      
      ProfileView()
        .tabItem {
          Label("Profile", systemImage: "person")
        }
        .environmentObject(profileRouter)
    }
  }
}

TabViewの子ViewにNavigationStackとか書く(4/4)

struct HomeView: View {
  @EnvironmentObject var homeRouter: HomeRouter
    var body: some View {
      NavigationView{
        NavigationStack(path: $homeRouter.items) {
          GeometryReader{ geometry in
            //ここにView詳細を書く
            //遷移させたいときは、homeRouter.items.append(.toNext)
          }
          .navigationDestination(for: HomeRouter.Item.self) { item in
            switch item {
            case .toNext:
              NextView()
            }
          }
        }
      }
    }
}

最後に

お疲れ様でした🔥うまくいかなかった人はコメントくれたら見ます🥳