付ける位置
1. 基本は最上位のView(Container)に付ける
VStackやZStack、Listなどの一番外側の親Viewに付けるのが最も管理しやすく、推奨される書き方です。
アラートは画面全体を覆うレイヤーとして表示されるため、個別のパーツ(Buttonなど)に付ける必要はありません。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
struct ContentView: View { @State private var isShowingAlert = false var body: some View { VStack { Button("アラートを表示") { isShowingAlert = true } } // ここ(最上位Viewの末尾)に付けるのが一般的 .alert("タイトル", isPresented: $isShowingAlert) { Button("OK") { } } message: { Text("メッセージ内容") } } } |
2. 複数のアラートを表示したい場合
同じView内で複数のアラートを使い分けたい場合は、以下の点に注意してください。
- 同じViewに複数の
.alertを並べない: SwiftUIの仕様上、同じ階層に並べると最後の一つしか動作しない場合があります。 - Enum(列挙型)で管理する: 表示したいアラートの種類をEnumで定義し、一つの
.alert内で内容を切り替えるのがスマートです。 - 階層を分ける: どうしても複数を記述したい場合は、それぞれを異なる
ButtonやSectionなどの別々のView階層に付与します。
3. バグを避けるための注意点
- Listの中で回さない:
ForEachやListの「各セル(行)」に.alertを付けると、パフォーマンスが低下したり、正しく表示されなかったりするバグの原因になります。必ずListの外側に記述してください。 - NavigationView(NavigationStack)の外側: 画面遷移を伴う場合、
NavigationStackの内側のコンテンツに付けるようにします。
List内に配置して直下のテキストボックスがすぐ閉じられるバグに遭遇した。
Listの再描写には注意。
使い方の例(簡単な構文)
isPresentedにBool型変数をセットする、ボタン等でその変数の値が変わったときにポップアップされる。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
.alert("タイトル", isPresented: $Bool変数) { //Button設置でボタンのカスタマイズ可 Button("戻る等", role: .cancel) { //処理(省略するとキャンセルになる) } Button("削除等", role: .destructive) { //削除処理とか //roleで色が赤で警告的な表示になる、ただ処理は自分で書く } }message: { Text("説明とか") //タイトルの下に書くテキスト、messageから省略可 } |

ユーザーに入力させたい時&入力制限
TextFieldが設置可能
|
1 2 3 4 5 |
.alert("テキスト", isPresented: $Bool変数) { TextField("", value: $格納したい変数, format: .number) .keybordType(.decimalPad) //or (.numberPad) } //↑ format: .number とモディファイアの .keybordType で数値に入力制限できる。 |
条件分岐等で複数出したい時
Bool変数を複数使う
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
.alert("", isPresented: $変数1){ Button("OK"){ if ~{ 変数2.toggle() }else{ 変数3.toggle() } } } .alert("", isPresented: $変数2){ } .alert("", isPresented: $変数3){ } |
Toggle 使用時 Bool の片方だけの値で alert を出したい時
true false 両方で alert は反応するので onChange を挟む
|
1 2 3 4 5 6 7 8 |
Toggle("", isOn: 変数1) .onChange(of: 変数1){ if 変数1{ 変数2.toggle() } } .alert("", isPresented: $変数2){} //上のToggleがtrueの時だけ反応する |
コメント