2
1

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 1 year has passed since last update.

【SwiftUI】アラートを表示する

Posted at

#環境
Xcode 13.2.1
Swift 5.5.2

#実装
ボタンをタップした時にアラートを表示する場合は以下のようなコードになります。

struct ContentView: View {
    @State private var isShowingAlert: Bool = false
    
    var body: some View {
        Button("アラートを表示する") {
            isShowingAlert = true
        }
        .alert("Text", isPresented: $isShowingAlert) {
            Button("Button1") {
                // タップした時の処理
            }
            Button("Button2") {
                // タップした時の処理
            }
        } message: {
            Text("メッセージを表示する")
        }
    }
}

ボタンを3つ以上定義すると縦並びになります。

#解説
UIKitではアラートを表示する処理をどこかのメソッドなどで呼ぶ形でしたが、SwiftUIでは定義したアラートに表示するかどうかの条件をバインドして表示するタイミングを管理します。

最初に、アラートを表示するかどうかを判定するState変数を定義します。

@State private var isShowingAlert: Bool = false

今回はボタンがタップされた時にアラートが表示されるようにしたいので、ボタンのタップ処理で最初に追加したisShowingAlertをtrueにします。

Button("アラートを表示する") {
    isShowingAlert = true
}

最後にalert()modifierを定義します。
Buttonに追加していますが、アラートを表示するかは定義したBool値がtrueになった時なので、必ずButtonに追加する決まりはありません。

.alert("Title", isPresented: $isShowingAlert) {
    Button("Button1") {
    // タップした時の処理
    }
    Button("Button2") {
    // タップした時の処理
    }
} message: {
    Text("メッセージを表示する")
}

引数
title
アラートのタイトルに使用される文字列を定義します。

isPresented
アラートを表示するかどうかを判定するBool値。アラートのアクションをタップするとこの値は自動的にfalseになります。

actions
アラートに表示するアクションボタンを定義します。アクションが存在しない場合は標準のOKボタンが表示されます。アクション実行後は自動的にアラートが閉じます。

message
タイトルの下に表示される文字列を定義します。messageはスタイルが設定されていないテキストのみサポートします。

###アクションボタンのスタイルを変更する
Buttonの引数roleの値を設定することでスタイルを変えることができます。
何も設定していない場合はデフォルトで青色の表示になります。

.cancel
青色のボールド表示。アクションボタンが2つ存在する場合は必ず左側に表示され、3つ以上存在する場合は必ず一番下に表示されます。

.destructive
赤色の表示。このアクションボタンが存在する場合は.cancelアクションボタンが自動的に追加されます。

Button("Button1") {
    // タップした時の処理
}
Button("Button2", role: .destructive) {
    // タップした時の処理
}

スタイルを設定していないアクションボタンと.destructiveのアクションボタンを追加した場合は以下のような表示なります。

2
1
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
2
1

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?