SwiftUI

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

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

使ったコンポーネントは

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

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

f:id:qed805:20200724175818p:plain:w300

カウンターアプリ

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

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()の関数を呼び出せば関数呼び出しができるようになります。

ABOUT ME
tamappe
都内で働くiOSアプリエンジニアのTamappeです。 当ブログではモバイルアプリの開発手法について紹介しています。メインはiOS、サブでFlutter, Android も対応できます。 執筆・講演のご相談は tamapppe@gmail.com までお問い合わせください。