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
}
})
}
}
そして次に、時間、分、秒と抜き出してカウントダウンしていきます。
以下日付の取得がまとめてありわかり易いです。
関数を作ります。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時間からのカウントダウンが開始されます。
ボタンを押してスタートさせるには。
この記事が気に入ったらサポートをしてみませんか?