【Swift UI】Button(ボタン)の構造や書式と使い方!actionやプロパティ

この記事からわかること
- SwiftのButtonとは?
- 構造や書式、使い方
- actionやプロパティ、@State
index
[open]
\ アプリをリリースしました /
環境
- Xcode:15.0.1
- iOS:17.1
- Swift:5.9
- macOS:Sonoma 14.1
参考文献:Button構造体
SwiftUIにおいて多用するButton構造体について使い方と役割をまとめておきます。
Swift UIのButton構造体とは?
struct Button<Label> where Label : View
Swift UIで使用できるButton
はいわゆるボタン機能を持ったビューを構築できる構造体の1つです。ユーザーのアクション(クリック)に対して任意の処理を行わせることができるのでアプリを開発する際には欠かせない構造体になります。
使用方法は他のView同様にイニシャライザを使ってインスタンス化します。Button構造体にはイニシャライザが複数存在するので書式が異なりますが、基本的な2つの引数がポイントになってきます。
2つの引数
- action:クリックされた時に実行される処理部分
- label:ボタンに表示させるテキストを定義
この2つがボタンを構成するために必要なポイントになります。ここからはイニシャライザというより書式で見ていきます。
書式1
Button("ボタン名") {
処理
}
書式2
Button(action : { 処理 } ) {
Text(ボタン名)
}
書式3
Button(action : { 処理 } ,
label : { Text(ボタン名) }
)
書式1の使い方
Button("ボタン名") {
処理
}
書式1は一番シンプルで分かりやすい構造です。ボタンの名前はText
構造体を使わずに定義することができます。
Button("プリントボタン") {
print("これはテストです") // デバッグエリアに出力
}
書式2の使い方
Button(action : { 処理 } ) {
Text(ボタン名)
}
書式2は先に処理部分をaction
の後に記述します。ボタン名部分もText
構造体を使って定義します。
Button(action : {
print("これはテストです") // デバッグエリアに出力
}) {
Text("プリントボタン")
}
書式3の使い方
Button(action : { 処理 } ,
label : { Text(ボタン名) }
)
書式3は処理部分とラベル(ボタン名)部分を明示的に定義できる書式です。
プロパティの使い方
変数を使ってボタン名を変化させたい場合は変数の定義方法に注意が必要です。変数の定義をButton
外で普通に宣言するとCannot use mutating member on immutable value: 'self' is immutable
(変更できないメンバーです:'self'は不変です)といったエラーが出てしまいます。
これを防ぐために@State
をつけて宣言します。@State
をつけた変数は値の変化を常に監視されるようになり、変化するとViewも更新されるようになります。
@State var check = true
var body: some View {
Button(action: {
check.toggle() // 真偽値を逆転させるモディファイア
}){
Text(check ? "ON" : "OFF")
}
}
条件によってボタンを無効にする
ボタンをクリックするとアクションに記述している処理が自動で実行されてしまいますが、.disabled
モディファイアを使えば条件によってボタンをクリックされてもアクションの処理を行わないようにすることも可能です。
true
にすると無効に、false
にすると有効になります。
Button(action : {
print("これはテストです") // デバッグエリアに出力
}) {
Text("プリントボタン")
}.disabled(true) // ボタンを無効にする
roleでボタンの役割を明示的に指定する
Button構造体のroleにdestructive
を指定するとデザインを削除ボタンとして定義することができます。
Button("Delete", role: .destructive, action: delete)
ボタンのスタイルを変更する
通常のボタンは文字だけが表示される簡素なものですがbuttonStyle
モディファイアにPrimitiveButtonStyle
プロトコルの任意の値を渡すことで変更できます。
.buttonStyle(BorderlessButtonStyle())

まだまだ勉強中ですので間違っている点や至らぬ点がありましたら教えていただけると助かります。
ご覧いただきありがとうございました。