【Swift UI】ObservableObjectとObservedObjectを理解するための時計アプリ

この記事は何か

SwiftUIフレームワークによるアプリ開発におけるデータフローを理解するために、シンプルな時計アプリを作成します。

環境

macOS 11.1
Xcode 12.3
Swift 5.3

コード

アプリのエントリーポイント

@main
struct WatchApp: App {
    let clock = Clock()
    
    var body: some Scene {
        WindowGroup {
            ContentView(clock: clock)
        }
    }
}

ObservableObjectのクラス

class Clock: ObservableObject {
    var timer = Timer()
    @Published var currentTime = ""
    
    init() {
        start()
    }
    
    func start() {
        let formatter = DateFormatter()
        formatter.timeStyle = .medium
        timer = Timer.scheduledTimer(withTimeInterval: 1.0, repeats: true, block: { (_) in
            self.currentTime = formatter.string(from: Date())
        })
    }
    
    func stop() {
        timer.invalidate()
    }
}

ContentView

import SwiftUI

struct ContentView: View {
    @ObservedObject var clock = Clock()
    
    var body: some View {
        Text("\(clock.currentTime)")
            .font(.title)
    }
}

struct ContentView_Previews: PreviewProvider {
    static var previews: some View {
        Group {
            ContentView(clock: Clock())
        }
    }
}