SWiftUIでいこう！ - Timer.publish処理

参考サイトを見ながらコードを書いて行きます。簡単にするためで見た目の部分は省いています。

大事なタイマーの部分です。

let timer = Timer.publish(every: 1.0, on: .main, in: .common).autoconnect()

このペアになるのが、

.onReceive()

となります。そして、今現在の年月日、時刻を取得します。

@State var currentTime:Date = Date()

これを

Text(currentTime.description)

で画面上に表示させます。

struct ContentView: View {
   
   let timer = Timer.publish(every: 1.0, on: .main, in: .common).autoconnect()
 
　　　　 @State var currentTime:Date = Date()

   var body: some View {
       Text(currentTime.description)
           .padding()
           .onReceive(timer, perform: { value in
               currentTime = value
           })
   }
}

実行すると時間を取得して時間をカウントしていきます。

こんな感じの表示で時間が進んでいくのが見れます。

次に単純なカウントダウンの実装です。

if count < 1{
　　finishText = "WW"
}else{
　　count -= 1
}

単純にカウントダウンして"0"になったときに"WW"と表示させます。

struct ContentView: View {
   
   let timer = Timer.publish(every: 1.0, on: .main, in: .common).autoconnect()

   @State var count = 10
   @State var finishText:String? = nil
   
   var body: some View {
       Text(finishText ?? "\(count)")
           .padding()
           .onReceive(timer, perform: { _ in
               if count < 1{
                   finishText = "WW"
               }else{
                   count -= 1
               }
           })
   }
}

そして次に、時間、分、秒と抜き出してカウントダウンしていきます。

以下日付の取得がまとめてありわかり易いです。

【SwiftUI】Date型やCalendarクラスを利用する日付の計算、比較の方法

関数を作ります。updateTime()として日付の差分を計算するものを作ります。.onReceive()には関数を実行させるためにupdateTime()を入れます。

struct ContentView: View {
   
   let timer = Timer.publish(every: 1.0, on: .main, in: .common).autoconnect()
   
   @State var timeRemain:String = ""
   let futureDate:Date = Calendar.current.date(byAdding: .day, value: 1, to: Date()) ?? Date()
   
   func updateTime(){
       let remin = Calendar.current.dateComponents([.hour,.minute,.second], from: Date(), to: futureDate)
       let hour = remin.hour ?? 0
       let minute = remin.minute ?? 0
       let second = remin.second ?? 0
       
       timeRemain = "\(hour):\(minute):\(second)"
   }

   var body: some View {
       Text(timeRemain)
           .padding()
           .onReceive(timer, perform: { _ in
               updateTime()
           })
   }
}

実行すると

となります。時間の差分が取れています。

Calendar.current.date(byAdding: .day, value: 1, to: Date()) ?? Date()

.dayとなっているために24時からのカウントダウンが始まります。これを.hourとすると1時間からのカウントダウンが開始されます。

ボタンを押してスタートさせるには。

SwiftUIを使って学習がてらタイマーアプリを作ってみよう2 - Qiita