【SwiftUI】Listのタップ処理

Listでタップ処理の実装方法を解説します。

スポンサーリンク

環境

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

【Xcode】12.5RC
【Swift】5.4
【iOS】14.5
【macOS】Big Sur バージョン 11.1
スポンサーリンク

基本的なタップ処理

Listでタップ処理を実現するには、.onTapGesture()モディファイアを使用します。
次のコードは基本的な使用例です。
フルーツ名をタップするとチェックボックスのON/OFFが切り替わります。

基本的なタップ処理

スポンサーリンク

セル全体をタップ領域にする

先程の例では、文字列部分のみがタップ領域となっており、右側の空白部分はタップできません。
セル全体をタップ領域にするには次の2行を追加します。

.contentShape()はタップ領域の形状を指定するモディファイアです。

スポンサーリンク

ListとButton

ListとButtonは相性がよくありません。
例えば、次のコードを実行すると、セルのどこをタップしてもButtonのactionが発動してしまいます。

ListとButton

また、次のようにButtonを2つ並べると、セルのタップで両方のactionが発動してしまいます。

Buttonを2つ並べる

解決策

Buttonの代わりに.onTapGestureを使うと個々のタップ検知が可能になります。

スポンサーリンク

あわせて読みたい記事

【SwiftUI】Listの使い方
(2022/03/09 更新) Listはデータの一覧表示をするのに適したViewです。 画面に収まらない量の場合はスクロール表示になるなど、UIKitのUITableViewに似ていますが、はるかに簡単に使えます。 ListはForEac...
【SwiftUI】Buttonの使い方
(2021/10/19 更新) ラベルとアクションを持つButtonの使い方を解説します。