【SwiftUI】簡単なカウンターアプリを作成してみた

まえがき

この記事はSwift独学者による備忘録です。
万が一誤った記載がある場合は、コメントでご指摘いただけると幸いですm(_ _)m

確認環境

XCode Version 15.4
MacOS Sonoma 14.4.1

カウンターアプリを作成してみた

基本的なコードを確認するため、簡単なカウンターアプリを作成してみました。
VStackでカウントした数字を表示するテキストとボタンを縦並びにし、ボタンはHStackで横並びにしています。
カウントとボタンの後ろにZStackで重ねて背景を表示しています。

ボタンのプラスとマイナスのアイコンは、Appleが提供しているSF Symbolsというアイコンライブラリを使用しています。
それぞれのボタンをタップするたびにカウンターが増減します。

コード例

ファイル名.swift

import SwiftUI

struct ContentView: View {
    @State private var count = 0

    var body: some View {
        ZStack {
            Rectangle()
                .fill(Color.gray.opacity(0.3))
                .frame(width: 280, height: 200)
            VStack {
                Text("カウント: \(count)")
                    .font(.largeTitle)
                    .cornerRadius(10)
                    .foregroundColor(Color(red: 0.2, green: 0.2, blue: 0.2))
                    .padding()
                
                HStack {
                    Button(action: {
                        count += 1
                    }) {
                        Image(systemName: "plus")
                            .font(.title)
                            .frame(width: 60, height: 60)
                            .background(Color.green)
                            .foregroundColor(.white)
                            .cornerRadius(10)
                    }
                    Button(action: {
                        count -= 1
                    }) {
                        Image(systemName: "minus")
                            .font(.title)
                            .frame(width: 60, height: 60)
                            .background(Color.red)
                            .foregroundColor(.white)
                            .cornerRadius(10)
                    }
                }
            }
            .padding()
        }
    }
}

画面名	画面名

あとがき

基本的な画面の表示方法を、簡単なカウンターアプリで練習してみました。
今後も捕捉事項があれば随時更新していきます。