見出し画像

SwiftUIでいこう! - 時計

今の時間をリアルタイムに表示できるようにします。

まず今の日付、時間を取得します。

var nowDate = Date()

 そして

DateFormatter()を変数に入れて使えるようにします。これでいろんな表示に対応させる道具が出来上がります。

let dateFormatter = DateFormatter()

どんな表示がいいか決めて使えるようにします。

 init() {
        dateFormatter.dateFormat = "YYYY/MM/dd(E) \nHH:mm:ss"
        dateFormatter.locale = Locale(identifier: "ja_jp")
    }

日付  YYYY/MM/dd(E) ・・・ 2022/11/22(火)
時間  HH:mm:ss.             ・・・    05:47:08

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))"
                }
            }
    }

表示は

dateFormatter.string(from: nowDate)

を使って文字に変換して表示させます。

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))"
                }
            }
    }
}


実行画面は

となりリアルタイムに時間を表示します。

この記事が気に入ったらサポートをしてみませんか?