【SwiftUI】○秒後にView切り替え

#1. はじめに
SwiftUIでアプリ作成する際、例えばゲーム画面から結果画面への遷移といったように○秒後にViewを切り替えたりメッセージを表示したい。というケースがあるかと思います。
今回はそういった場合のSwiftUIでの実装について備忘録の意味も込めて簡単な例でご紹介していきたいと思います。

#2.作るもの
今回最終的に作る画面はこちらです。
５秒カウントダウンした後Hello,worldが表示される簡単なアプリです。

#3.プログラム
それではコードの解説にうつります。まずは全文です。

ContentView.swift

struct ContentView: View {
    // カウントダウンする秒数
    @State private var count = 5
    // true:カウントダウン中　false:カウントダウン終了
    @State private var isCountDown = true

    var body: some View {
        VStack {
            Text("\(self.count)秒後にHello, worldと表示されます")
            if !self.isCountDown {
                Text("Hello, world!")
            }
        }
        .onAppear() {
            // 1.0秒おきに{}内を繰り返す
            Timer.scheduledTimer(withTimeInterval: 1.0, repeats: true) {timer in
                self.count -= 1
                if self.count == 0 {
                    // 現在のカウントが0になったらtimerを終了させ、カントダウン終了状態に更新
                    timer.invalidate()
                    self.isCountDown = false
                }
            }
        }
    }
}

struct ContentView_Previews: PreviewProvider {
    static var previews: some View {
        ContentView()
    }
}

###3.1. 状態変数の宣言

    // カウントダウンする秒数
    @State private var count = 5
    // true:カウントダウン中　false:カウントダウン終了
    @State private var isCountDown = true

こちらはコメント文の通りです。状態変数としてカウント秒数(今回は５秒）、カントダウン状態を保持する変数(trueの間カウントダウンし続ける）を宣言しています。
＠Stateなのでこの変数が更新されたタイミングでViewも再描画されます。

3.2. Viewの作成

メインのViewを作っていきます。
TextのViewをVStackで縦に並べているだけです。ただし、Hello, worldはカウントダウンが終了したタイミングで表示したいのでif文でisCountDownがfalseのときに表示するようにしています。

VStack {
            Text("\(self.count)秒後にHello, worldと表示されます")
            if !self.isCountDown {
                Text("Hello, world!")
            }
        }

3.3. タイマーを導入する

.onAppear() {
...
}

onAppear()メソッドを使っていますので、アプリ起動時にViewが描画されたタイミングでメソッド内のコードが実行されます。
今回はこの中にカウントダウンする処理を記載します。

Timer.scheduledTimer(withTimeInterval: 1.0, repeats: true) {timer in
 //withTimeIntervalの秒数ごとに繰り返される
}

こちらがカウントダウンする処理になります。TimerのscheduledTimerメソッドを使用します。
withTimeIntervalに指定した秒数カウントされ、repeatsがtrueは繰り返し、falseの場合１回のみカウントされますので
上記の場合１秒のカウントが永遠に実行されることになります。
やりたいことは5秒のカウントダウンですので状態変数で宣言したcountをデクリメントしていき0になったタイミングでtimer.invalidate()を呼び出しタイマーのカウントを終了させます。
また、カウントダウンが終了したので状態変数isCountDownもfalseにしてあげます。

self.count -= 1
   if self.count == 0 {
   // 現在のカウントが0になったらtimerを終了させ、カントダウン終了状態に更新
        timer.invalidate()
        self.isCountDown = false
    }

以上で終了です。
ほかにも秒数やTimer内の処理をアレンジしていろんな処理がかけるかと思います。
私はNavigationlinkでの画面遷移に採用したりしました。

4. おわりに

SwiftUIから入りiosアプリ開発を学び始めて１ヶ月程ですが、まだまだ情報が少なく辛い状況でした。。
今回のTimer処理も調べてもSWiftUIでの実装があまり見つからず記事にした次第です。（それとも当たり前すぎて誰も記事にしていないのかな。。）
やっぱりUIKitの勉強もしないといけないですかね。

もっとこうした方がいい等ありましたらコメントいただけると幸いです。