[SwiftUI]Buttonの使い方（１）〜ボタンとは〜

SwiftUI

2021.05.242021.06.05

2021/5/24

「Buttonってどうやって使うの？」

「Buttonについて知りたい」

と言う人に向けて、この記事は書かれています。

どうも、ちょげ（@chogetarou）です。

この記事ではSwitUIのButtonについて解説します。

概要
1. action
2. label
使用例
1. ボタンをタップで値を変える
まとめ
Buttonシリーズ

概要

質問, パズル, 誰, 何, どのように, なぜ, どこ, 通信手段, フォント, 言語, 学校, 事故

Buttonビューは、ビューがタップされた時に何かしらの処理を行うビューです。

Buttonのざっくりとした定義はこんな感じです。

Button(action: { }, label: { })

action
タップした時の処理
label
表示するビュー

action

actionには、タップした時に行わせたい処理を記述します。

処理は1つだけではなく複数記述することが出来ます。

label

labelには、ビューを記述します。

デフォルトでは、Textビューが入っています。

Textビューだけでなく、ImageやRectangleなどのビューも記述することが出来ます。

使用例

実際に使うときには、labelを省略して、Buttonの後ろに{ }を記述します。

Button (action : {}) {

}

ボタンをタップで値を変える

struct ContentView: View {
    @State var a = 0
    var body: some View {
        VStack {
            Button (action: {
                a += 1
            }) {
                Text("aに1を足す")
            }
            
            Text("\(a)")
                .padding()
        }
        
    }
}

ボタンを押すと、action内のaに1を足す処理が行われます。

また、ラベル内のテキストビューがボタンとして表示されています