SwiftUIで行こう！-カウントダウン アプリ！

「Catch Questions アカデミー」さん(https://www.youtube.com/watch?v=zYhJs93s9cI)と

How To Make a Simple Countdown Timer with SwiftUI

を参考に作ってみました。

基本です。ContentViewです。

struct ContentView : View {
 var toDate = Calendar.current.date(byAdding:.hour,value:1,to:Date())
 var body: some View {
   TimerView(setDate: toDate!)
 }
}

var body: some View{} の中に

TimerView(setDate: toDate!)

struct 構造体を入れて実行します。初期値は

var toDate = Calendar.current.date(byAdding:.hour,value:1,to:Date())

と作っています。

byAdding:.hour,value:1,to:Date()

なので、1時間の残り時間を表示します。

表示が出来たらあとはカウントダウンしていきます。

TimerView(setDate: toDate!)

を実行するプログラミングをします。別ファイルで管理します。

struct TimerView : View {}

を作っていきます。タイマーの構成、動きです。別ファイルで管理します。

@State var nowD:Date = Date()
let setDate:Date

変数は2つ

@State var nowD:Date = Date()

については@Stateを付けて Timer.scheduledTimerで更新していきます。

withTimeInterval: 1で1秒毎に更新されます。

func TimerFunc(from date:Date)->String{}

のなかで、let timeValに更新した時間を入れていきます。次に

return String(format: "%02dd:%02dh:%02dm:%02ds",
timeVal.day ?? 00,
timeVal.hour ?? 00,
timeVal.minute ?? 00,
timeVal.second ?? 00)

に入れていき、最終的にfuncはText()の中に入れ引数を渡すことで画面表示させることが出来ます。.onAppear(perform: {}で起動するには「_ = self.timer」を入力する必要があります

var body: some View {
Text(TimerFunc(from: setDate))

}

TimerView全コードです。

import SwiftUI
struct TimerView : View {
  @State var nowD:Date = Date()
   let setDate:Date
   
   var timer: Timer {
       Timer.scheduledTimer(withTimeInterval: 1, repeats: true) {_ in
           self.nowD = Date()
       }
   }
   
   var body: some View {
       Text(TimerFunc(from: setDate))
           .font(.largeTitle)
           .onAppear(perform: {
                          _ = self.timer
                      })
}

   func TimerFunc(from date:Date)->String{
       let cal = Calendar(identifier: .japanese)

       let timeVal = cal.dateComponents([.day,.hour,.minute,.second], from: nowD,to: setDate)

       return String(format: "%02dd:%02dh:%02dm:%02ds",
       timeVal.day ?? 00,
       timeVal.hour ?? 00,
       timeVal.minute ?? 00,
       timeVal.second ?? 00)
       
   　　　}
   
　　}

日付の取得とその差分を利用してタイマーをカウントダウンして画面上に表示させています。