バッテラのハローワールド研究室

エンジニア、プログラミングに関する情報を掲載中!

【SwiftUI】ListだとButtonのタッチ判定がList全体になってしまう問題の対処方法

SwiftUI

はじめに

今日はSwiftUIを勉強していきます。

議題としてはList内のアイテムにButtonを入れた場合に起きる問題についてです。

普通はButtonをタッチしたらボタンイベントが呼ばれますが、List内のButtonはどこ押しても反応するようになります。

今回はその事象の説明とButtonのタッチイベントはそのまま残したい場合にするやり方について共有していこうと思います。

環境

この記事の情報は次のバージョンで動作確認しています。

* MacOS Monterey (12.1)
* Xcode (13.3.1)

事象

List内にButtonを2つ配置してシミュレータで確認してみます。

ログを見てると分かりますが、Button以外を押しても2つのボタンの押下イベントが呼ばれてます。

片方のButtonを押してももう片方のButtonの押下イベントが呼ばれます。

つまりButtonそのものにタッチ判定がなく、全体がタッチ判定になってるということです。

対処方法

.buttonStyleモディファイアを使いましょう。

Button(action: {
    print("ボタン1")
}, label: {
    Text("ボタン1")
})
.buttonStyle(BorderlessButtonStyle())

デフォルトはDefaultButtonStyleになってるようでこれ以外にすれば OKです。

Buttonのデザインを自分で作っている場合はとりあえずBorderlessButtonStyleにしとけばOKだと思います。

buttonStyleは全体で設定できる

VStackなどのグループViewでbuttonStyleを適用するとその子のButton全てにスタイル適用できます。

VStack {

//    Button()
//    Button()

}.buttonStyle(BorderlessButtonStyle())

参考にしたサイト

qiita.com

おわりに

最後まで見ていただきヘペトナス!

読者登録・Twitterのフォローもお願いします。