【SwiftUI】ボタンの作成

SwiftUIにおいて、ボタンを作成する方法を紹介します。

iOS：13.0以上
XCode（当サイトの環境）：15.0.1

コード例
ボタンの基本的な使い方
Listなどのコンテナやコンテキストメニューにも適用可能
roleを使用する必要性
ボタンの関数化

コード例

下記コードは、ボタンをタップするたびにタップした回数を表示する処理を示しています。

import SwiftUI

struct ButtonSample: View {
    @State var tapCount = 0
    var body: some View {
        VStack {
            Button(action: {
                // ボタンをタップした時の動作を設定する
                tapCount+=1;
            }) {
                // ボタンとして表示するViewを設定する
                Text("Tap Count:\(tapCount)")
            }
        }
    }
}

struct ButtonSample_Previews: PreviewProvider {
    static var previews: some View {
        ButtonSample()
    }
}

ボタンの基本的な使い方

action部分に、ボタンをタップした時の動作を記述します。

label部分にボタンとして表示するViewを設定します。
文字列だけでなく、アイコンや画像を設定することも可能です。

Listなどのコンテナやコンテキストメニューにも適用可能

下記のようにListビューにボタンを適用することも可能です。

    var body: some View {
        List {
            Button(action: {
                // ボタンをタップした時の動作を設定する
                tapCount+=1;
            }) {
                // ボタンとして表示するViewを設定する
                Text("Tap Count:\(tapCount)")
            }
        }
    }

下記はコンテキストメニューに追加した例です。

struct ButtonSample: View {
    @State var tapCount = 0
    var body: some View {
        VStack {
            Text("Hello World!")
            .contextMenu {
                Button(action: {
                    // ボタンをタップした時の動作を設定する
                    tapCount+=1;
                }) {
                    // ボタンとして表示するViewを設定する
                    Text("Tap Count:\(tapCount)")
                }
            }
        }
    }
}

roleを使用する必要性

ボタンには役割roleを与えることができます。

システムで以下の役割が用意されています。
roleを設定しておくことで、外観を統一するのに役立ちます。
必須のパラメータではなく、設定しても直接的に動作に影響するものではなさそうです。

cancel
destructive

ボタンの関数化

以下のようにボタンを関数化することでView部分のコードをすっきりさせることもできます。

import SwiftUI

struct ButtonSample: View {
    @State var tapCount = 0
    
    var body: some View {
        VStack {
            tap()
        }
    }
    
    //ボタンの関数化
    fileprivate func tap() -> Button<Text> {
        Button(action: {
          // ボタンをタップした時の動作を設定する
            tapCount+=1;
        }) {
            // ボタンとして表示するViewを設定する
            Text("Tap Count:\(tapCount)")
        }
    }
}