プログラミング

[SwiftUI]画面遷移の実装方法

プログラミング
この記事は約3分で読めます。
スポンサーリンク

SwiftUIの画面遷移の実装方法を説明していきます。

スポンサーリンク

完成イメージ

前提条件

既にプロジェクトは作成済みである前提です。

もし、プロジェクトの作成方法がわからない場合はこちらのサイトを参考にしてください!

[SwiftUI]プロジェクトを新規作成する
SwiftUIを使う機会があったので、とりあえずプロジェクトを新規作成して「Hello World!」を表示するまでの手...

画面遷移先のViewの作成

SecondView.swiftを作成します。

struct SecondView: View {
    @EnvironmentObject var model: Model

    var body: some View {
        VStack {
            Text("Second View")
            Button("戻る") {
                self.model.secondViewPushed = false
            }
        }
    }
}

画面遷移の状態管理クラス作成

ScreenTransitionView.swiftというファイルを作成し、ここに画面遷移の状態管理を行うクラスを実装します。

import SwiftUI

class Model: ObservableObject {
    @Published var secondViewPushed = false
}

画面遷移元のView(ContentView)の編集

ContentView.swiftを編集します。

struct ContentView: View {
    @EnvironmentObject var model: Model

    var body: some View {
        NavigationView {
            VStack {
                Text("First View")
                NavigationLink(destination: SecondView(), isActive: self.$model.secondViewPushed) {
                    Button(action: {
                        self.model.secondViewPushed = true
                    }) {
                        Text("次へ")
                    }
                }
            }
        }
    }
}

SceneDelegate編集

ObservableObjectがアプリ全体で利用できるようにするため、SceneDelegateを編集します。

let contentView = ContentView()

この部分を

let contentView = ContentView().environmentObject(Model())

このように書き換えます。

ではシミュレーターで動作確認していきたいと思います。

動作確認

画面遷移を実装することができました!!

最後に

SwiftUIでアプリ開発している際に今までのiOSアプリ開発と画面遷移の方法が違いすぎて実はここまで理解するのにかなり時間がかかってしまいました。もし、SwiftUIでアプリ開発している人で画面遷移の実装がうまくってないようであれば参考にしてもらえればと思います。

スポンサーリンク
スポンサーリンク
KoEをフォローする
CodeLab

コメント

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