SwiftUIでいこう! - 時計
今の時間をリアルタイムに表示できるようにします。
まず今の日付、時間を取得します。
var nowDate = Date()
そして
DateFormatter()を変数に入れて使えるようにします。これでいろんな表示に対応させる道具が出来上がります。
let dateFormatter = DateFormatter()
どんな表示がいいか決めて使えるようにします。
init() {
dateFormatter.dateFormat = "YYYY/MM/dd(E) \nHH:mm:ss"
dateFormatter.locale = Locale(identifier: "ja_jp")
}
SWiftUIで表示させます。
まず最初の処理としては
@State var dateText = ""
@State var nowDate = Date()
private let dateFormatter = DateFormatter()
init() {
dateFormatter.dateFormat = "YYYY/MM/dd(E) \nHH:mm:ss"
dateFormatter.locale = Locale(identifier: "ja_jp")
}
表示させるデータを入れる変数 "dateText"を作ってそこに今のデータを入れてDateFormatter()を使って作った変数"dateFormatter"で表示させたい形にします。
あとは以下のようにSwiftUIのText()を使って表示させます。
var body: some View {
Text(dateText)
.font(.largeTitle)
.onAppear {
Timer.scheduledTimer(withTimeInterval: 1, repeats: true) { _ in
self.nowDate = Date()
dateText = "\(dateFormatter.string(from: nowDate))"
}
}
}
表示は
を使って文字に変換して表示させます。
リアルタイムに表示させたいので、"Timer"を使い、変数にも"@State"
をつけて変更を適用できるようにします。
全体です。
import SwiftUI
struct ContentView: View {
@State var dateText = ""
@State var nowDate = Date()
private let dateFormatter = DateFormatter()
init() {
dateFormatter.dateFormat = "YYYY/MM/dd(E) \nHH:mm:ss"
dateFormatter.locale = Locale(identifier: "ja_jp")
}
var body: some View {
Text(dateText.isEmpty ? "\(dateFormatter.string(from: nowDate))" : dateText)
.font(.largeTitle)
.onAppear {
Timer.scheduledTimer(withTimeInterval: 1, repeats: true) { _ in
self.nowDate = Date()
dateText = "\(dateFormatter.string(from: nowDate))"
}
}
}
}
実行画面は
となりリアルタイムに時間を表示します。
この記事が気に入ったらサポートをしてみませんか?