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

この記事からわかること
- SwiftのButtonとは?
- 構造や書式、使い方
- actionやプロパティ、@State
index
[open]
\ アプリをリリースしました /
Swift UIのButton構造体とは?
struct Button<Label> where Label : View
Swift UIで使用できるButton
はボタン機能を持ったビューを構築できる構造体の1つです。
実際に表示させるにはイニシャライザを使ってインスタンス化して使用します。その際には複数あるイニシャライザによって書式が異なりますが基本的な2つの引数がポイントになってきます。
2つの引数
- action:クリックされた時に実行される処理部分
- label:ボタンに表示させるテキストを定義
書式1
Button("ボタン名") {
処理
}
書式2
Button(action : { 処理 } ) {
Text(ボタン名)
}
書式3
Button(action : { 処理 } ,
label : { Text(ボタン名) }
)
書式1の使い方
Button("ボタン名") {
処理
}
書式1は一番シンプルで分かりやすい構造です。ボタンの名前はText
を使わずに定義することができます。
Button("プリントボタン") {
print("これはテストです") // デバッグエリアに出力
}
書式2の使い方
Button(action : { 処理 } ) {
Text(ボタン名)
}
書式2は先に処理部分をaction
の後に記述します。ボタン名部分もText
を使って定義するのでif
文や?:
演算子などを使って出力したい値を変更させることができます。
Button(action : {
print("これはテストです") // デバッグエリアに出力
}) {
Text("プリントボタン")
}
if文
if (条件式) {
処理
}else {
処理
}
?:演算子
論理式 ? trueの値 : falseの値
書式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)
まだまだ勉強中ですので間違っている点や至らぬ点がありましたら教えていただけると助かります。
ご覧いただきありがとうございました。
個人開発に限界を感じたらiOSに特化したプログラミングスクール「iOSアカデミア」も検討してみてください!無料相談可能で「最短・最速」でiOSエンジニアになれるように手助けしてくれます。