Sponsor Link
環境&対象
- macOS Monterey 12.4 beta4
- Xcode 13.3.1
- iOS 15.4
Button
Button を使うと 名前の通り、ボタンのインターフェースを作成することができます。

Button を作成するためには、以下の2種類の情報を指定することが必要です。
- 押された時の動作 (action)
- ボタンに表示される要素
- SwiftUI の ビューで指定(Label)
- ローカライズ可能な文字列で指定(LocalizedStringKey)
カッコ内の名称は、Initializer での引数名です。
Label
Labelを指定して Button を作成する方法です。
label に指定したビューを持つ Button が作成されます。(action には、空な closure を設定しています)
Button(action: {}, label: {
Text("Button with Label")
})
上記のコードでは、以下のように、Text を表示要素として持つ Button が作成されます。

LocalizedStringKey
通常の文字列を与えるとそれは、言語設定に応じて適切な文字列に変換される LocalizedStringKey として扱われます。(ここでは特に 言語設定をしていないので、そのままの文字列が使われています。)
Button("Button with String", action: {} )
上記のコードでは、 “Button with String” という文字列が言語設定に応じて適切な文字列に変換されて表示要素になります。

実は、Text が受け取る文字列も LocalizedStringKey なので、label に Text で指定するものと同じ結果となっています。
シンプルな使い方
action と label もしくは、action と LocalizedStringKey を組み合わせることで簡単にボタンを作成することができます。
//
// ContentView.swift
//
// Created by : Tomoaki Yagishita on 2022/05/10
// © 2022 SmallDeskSoftware
//
import SwiftUI
struct ContentView: View {
@State private var text = " - "
var body: some View {
VStack {
Button(action: {
text = "Button1 pushed"
}, label: {
Text("Button1")
})
.padding()
Button("Button2", action: {
text = "Button2 pushed"
})
.padding()
Text(text)
.padding()
}
.padding(30)
}
}
struct ContentView_Previews: PreviewProvider {
static var previews: some View {
ContentView()
}
}
上記のコードの動作は以下のようになります。
Container に入れられたButton
Button を Container (List や Menu) に入れると、Button は その状況に応じて表示を変化させます。
以下は、Apple のドキュメントに記載されているサンプルをベースにしています。
struct ContentView: View {
let folders = ["Documents", "Downloads", "Recents"]
var body: some View {
List {
ForEach(folders, id: \.self) { folder in
Text(folder)
}
Button(action: {}) {
Label("Add Folder", systemImage: "folder.badge.plus")
}
}
.padding()
}
}

Button の表現が、リスト項目の表現に合わせられていることがわかります。
Button の role 指定
Button の意味合いを role という属性で設定することができます。
role の詳細は以下の記事を参照してください。
[SwiftUI] Button の新しい属性 role
Button の style 指定
Button 向けにスタイルを指定するための View Modifier が用意されています。
.buttonStyle がそれです。
用意されているスタイルには、automatic, bordered, borderedProminent, borderless, card, link, plain があり、それぞれ以下のような指定になります。
スタイル名 | 意味 | 利用可能OS |
---|---|---|
automatic | デフォルト(iOS は borderless になり macOS, tvOS, watchOS は、bordered) | iOS, macOS, tvOS, watchOS, Mac Catalyst |
bordered | ボーダー付き | iOS, macOS, tvOS, watchOS, Mac Catalyst |
borderedProminent | 目立つボーダー | iOS, macOS, watchOS, Mac Catalyst |
borderless | ボーダーレス | iOS, macOS, watchOS, Mac Catalyst |
card | フォーカスされたときに、エフェクトがつく | tvOS |
link | リンク | macOS |
plain | 押下など状態変化でエフェクトがつく | iOS, macOS, tvOS, watchOS, Mac Catalyst |
iOS/macOS でそれぞれ 以下のようになります。
実際に適用するには、以下のように記述します。以下は、bordered なスタイルを適用しています。
Button(action:{}, label:{Text("Push me!")})
.buttonStyle(.bordered)
Button のカスタマイズ
Picker や TextField 等のビュー と同じように、Button についても 独自の Style を定義してカスタマイズすることができ、そのためのベースとして、2種類の Style が用意されています。
ButtonStyle と PrimitiveButtonStyle がその2つです。
ButtonStyle は、(振る舞いは変更せずに)見た目だけ変更したいときにベースにする Style で、
PrimitiveButtonStyle は、見た目だけではなく振る舞いも変更するときにベースにする Style です。
まとめ
SwiftUI でボタン要素を作成するために用意されている Button を説明しました。
- action と label を指定して Button を作成する
- action と LocalizedString の組み合わせでも作成できる
- Container に入れられると適切な表示に変更される
- Style を指定することで表示をカスタマイズできる
- role を設定することで、ボタンの種類をユーザーに提示できる
下の記事では ButtonStyle を使って インジケータ表示付きの長押しするボタンを作りました。ButtonStyle を使ったカスタマイズ例です。
[SwiftUI] インジケータ付き LongPress できる Button (ButtonStyle を使ったカスタマイズ)
説明は以上です。
不明な点やおかしな点ありましたら、こちらまで。
Sponsor Link