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


コメント