[Swift]リスト(List)の要素全体(item all)をタップできる(tapable)ようにするには？

どうも、ちょげ(@chogetarou)です。

１部分だけでなく、リストの要素全体をタップできるようにする方法を紹介します。

方法
使用例

方法

Listの要素全体をタップできるようにするには、SpacerとcontentShape修飾子を使います。

まず、Listの要素をHStackで囲みます。

次に、HStackの余白にSpacerを配置します。

そして、HStackにcontentShape修飾子を付与し、contentShapeの引数に「 Rectangle()」を指定します。

List {
   HStack {
     ItemView()
     Spacer() //余白にSpacer
   }
   .contentShape(Rectangle())
}

あとは、onTapGestureで、HStackにタップ処理を追加します。

これで、リストの要素全体をタップできるようになります。

使用例

以下は、使用例です。

struct ContentView: View {
    @State var counters = [0, 0, 0, 0, 0]
    var body: some View {
            List {
                ForEach (0 ..< counters.count, id: \.self) { index in
                    HStack {
                        Text("Count : \(counters[index])")
                        Spacer()
                    }
                    .contentShape(Rectangle())
                    .onTapGesture {
                        self.counters[index] += 1
                    }
                }
            }
    }
}