はじめに
今日はSwiftUIを勉強していきます。
議題としてはList内のアイテムにButtonを入れた場合に起きる問題についてです。
普通はButtonをタッチしたらボタンイベントが呼ばれますが、List内のButtonはどこ押しても反応するようになります。
今回はその事象の説明とButtonのタッチイベントはそのまま残したい場合にするやり方について共有していこうと思います。
環境
この記事の情報は次のバージョンで動作確認しています。
事象
List内にButtonを２つ配置してシミュレータで確認してみます。
ログを見てると分かりますが、Button以外を押しても２つのボタンの押下イベントが呼ばれてます。
片方のButtonを押してももう片方のButtonの押下イベントが呼ばれます。
つまりButtonそのものにタッチ判定がなく、全体がタッチ判定になってるということです。
対処方法
.buttonStyleモディファイアを使いましょう。
Button(action: { print("ボタン１") }, label: { Text("ボタン１") }) .buttonStyle(BorderlessButtonStyle())
デフォルトはDefaultButtonStyleになってるようでこれ以外にすれば OKです。
Buttonのデザインを自分で作っている場合はとりあえずBorderlessButtonStyleにしとけばOKだと思います。
buttonStyleは全体で設定できる
VStackなどのグループViewでbuttonStyleを適用するとその子のButton全てにスタイル適用できます。
VStack {
// Button()
// Button()
}.buttonStyle(BorderlessButtonStyle())
参考にしたサイト
おわりに
最後まで見ていただきヘペトナス！
読者登録・Twitterのフォローもお願いします。