【SwiftUI】List項目のタップに余白を含める

概要

SwiftUIのList項目にGestureを追加した際に余白を含める方法です。
NavigationLinkであればList項目全体が反応しますが、
単純にテキストなどを並べた際は該当テキストの位置しか反応しません。
こう言った場合に項目全体を含める方法です。

コード

List {
    HStack {
        Text("")
        Spacer()
    }
    .contentShape(Rectangle())
    .onTapGesture {

    }
}

解説

まずList項目をHStackで囲いSpacerも加えます。これでList項目はテキストだけでなく列全体になります。
しかしSwiftUIはしっかりとコンテンツと余白を区別して除外してくれるのでまだタップできません。

次にcontentShapeにRectangleを指定します。
これでList項目の長方形がコンテンツと認識される為、余白の位置までタップが有効になります。

対応が必要な理由

例えば、通常はNavigationLinkが表示されており、
EditModeがtrueの際にはテキストが表示されタップするとSheetが開く
と言ったViewを作った際にEditModeのON/OFFでタップ可能な範囲が変わると不便です。

また、文字数が少ない場合はタップしにくくなりますし、
空文字を許容するとタップ不可になります。

ブログ紹介

ブログには実用例も含めて詳しく解説しています。
興味があればご覧ください。