【SwiftUI】Buttonでボタンを実装する方法を解説

Buttonの実装

テキストのボタンの実装

テキストのボタンは、以下のように実装します。

Button("ボタンのテキスト") {
　　// ボタンタップ時の処理
}

()内に、ボタンとして表示するテキストを指定し、{}内には、ボタンがタップされた際に行う処理を実装します。

以下は、ボタンをタップすると、Textの表示内容が切り替わるサンプルコードです。

画像などのカスタムボタンの実装

続いて、画像などを使用したカスタムボタンの実装についてです。カスタムボタンは、以下のように実装します。

Button(action: {
　　// ボタンタップ時の処理
}) {
　　// ボタン用のView
}

「ボタン用のView」の部分に、画像などのViewを実装することで、カスタムボタンを実装することができます。以下は、画像とテキストを一緒にしたボタンのサンプルコードです。

なお、Viewはデフォルトでは横並びに表示されますが、VStackを実装すれば、縦並びに表示することができます。

ボタンのスタイルの変更

最後に、ボタンのスタイルの変更方法について解説致します。ボタンのスタイルは、buttonStyle()で変更できます。

iOSでは、以下の3種類が指定可能です。

3つのスタイルを実装してみましたが、DefaultButtonStyleとBorderlessButtonStyleは同じ見た目となりました。

PlainButtonStyleは、デフォルトの青色ボタンスタイルが適応されず、わかりにくいですが、タップ時にエフェクトが発生しました。

以上、Buttonでボタンを実装する方法についてでした。