構造体

Button

アクションを開始するコントロール。

iOS 13.0+ iPadOS 13.0+ macOS 10.15+ Mac Catalyst 13.0+

tvOS 13.0+ watchOS 6.0+

宣言

struct Button<Label> where Label : View

概要

アクションとラベルを提供してボタンを作成します。アクションは、ユーザーがボタンをクリックまたはタップしたときに何らかの処理を行うメソッドまたはクロージャプロパティのいずれかです。ラベルは、ボタンのアクションを説明するビューです。たとえば、テキスト、アイコン、またはその両方を表示します。

Button(action: signIn) {
Text("Sign In")
}

テキストのみのラベルの一般的な場合では、後方のクロージャの代わりにタイトル文字列または LocalizedStringKey を最初のパラメータとして受け取るコンビニエンスイニシャライザを使用できます。

Button("Sign In", action: signIn)

ユーザーがボタンをアクティブにする方法はプラットフォームによって異なります。

iOS および watchOS では、ユーザーがボタンをタップします。

macOS では、ユーザーがボタンをクリックします。

tvOS では、ユーザーはボタンに焦点を当てながら、Siri リモコンなどの外部リモコンの "選択" を押します。

ボタンの外観は、ボタンを配置する場所、役割を割り当てるかどうか、スタイルの設定などの要因によって異なります。

コンテナへのボタンの追加

アクションを開始するユーザーインターフェイス要素にはボタンを使用します。ボタンは、これらのさまざまなコンテナやコンテキスト内で予期されるスタイルに一致するように、視覚的なスタイルを自動的に調整します。たとえば、ユーザーが選択したときにアクションを開始する List セルを作成するには、リストのコンテンツにボタンを追加します。

List {
// Cells that show all the current folders.
ForEach(folders) { folder in
Text(folder.title)
}
// A cell that, when selected, adds a new folder.
Button(action: addItem) {
Label("Add Folder", systemImage: "folder.badge.plus")
}
}

同様に、アクションを開始するコンテキストメニュー項目を作成するには、contextMenu(_:) ( 廃止 ) 修飾子のコンテンツクロージャにボタンを追加します。

.contextMenu {
Button("Cut", action: cut)
Button("Copy", action: copy)
Button("Paste", action: paste)
}

このパターンは、Form (Form) インスタンスなど、カスタマイズ可能なインタラクティブなコンテンツを持つ SwiftUI の他のほとんどのコンテナビューに拡張されます。

役割の割り当て

オプションで、ボタンの目的を特徴付ける ButtonRole を使用してボタンを初期化できます。たとえば、削除アクション用の destructive ボタンを作成できます。

Button("Delete", role: .destructive, action: delete)

システムはボタンの役割を使用して、あらゆるコンテキストでボタンのスタイルを適切に設定します。たとえば、コンテキストメニューの破壊的なボタンは、赤色の前景色で表示されます。

ボタンの役割を指定しない場合、システムは適切なデフォルトの外観を適用します。

ボタンのスタイリング

bordered などの標準的なボタンスタイルの 1 つを使用してボタンの外観をカスタマイズし、buttonStyle(_:) 修飾子を使用してそのスタイルを適用できます。

HStack {
Button("Sign In", action: signIn)
Button("Register", action: register)
}
.buttonStyle(.bordered)

上記の例のように、スタイルをコンテナビューに適用すると、コンテナ内のすべてのボタンでそのスタイルが使用されます。

カスタムスタイルを作成することもできます。標準の操作動作を備えたカスタムの外観を追加するには、ButtonStyle プロトコルに準拠するスタイルを作成ししてください。外観と操作動作の両方をカスタマイズするには、PrimitiveButtonStyle プロトコルに準拠するスタイルを作成して下さい。カスタムスタイルはまた、ボタンの役割を読み取り、それを使用してボタンの外観を調整することもできます。