2. SwiftUIでカウンターアプリを作ってみる

今回はSwiftUIでカウンターアプリを作ってみた。

使ったコンポーネントは

• VStack (縦に並べるもの)
• Text (カウンター表示用)
• Button (タップしてカウンターを増減させる)

出来上がった画面は次の通りである。

カウンターアプリ

書いたソースコードはこちらです。

ContentView.swift

import SwiftUI

class Counter: ObservableObject {

    @Published var count: Int = 0
    
    func increment() {
        count += 1
    }
}

struct ContentView: View {
    @ObservedObject var counter = Counter()
    
    var body: some View {
        VStack {
            Text("count: \(counter.count)")
            
            Text("カウンター")
                .bold()
                .italic()
                .foregroundColor(.white)
                .font(.title)
                .fontWeight(.bold)
                .background(Color.yellow)
            
            Button(action: {
                counter.increment()
            }, label: {
                Text("カウント+")
            })
        }
    }
}

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

やりたかったのはButtonのactionで関数呼びをしたかっただけです。
ですが、ContentViewがstruct(構造体)で、struct内で関数宣言してButtonのaction内で呼び出ししようとしてもエラーが発生して呼び出せない。
そこでどうすれば関数呼び出しができるのかを検索したら見つかりました。

ObservableObjectを継承したクラスを作成してこのクラスでロジックを持たせたらいいみたい。

ちなみにこのロジッククラスをContentViewクラスでプロパティとして持たせようと

@ObservedObject let counter = Counter()

で宣言しても

Property wrapper can only be applied to a 'var'

と怒られてビルドに失敗しました。
あとはこのcounterのプロパティをButtonのactionで呼び出しして、increment()の関数を呼び出せば関数呼び出しができるようになります。