Help us understand the problem. What is going on with this article?

【SwiftUI】contentShapeでTap領域を広げる

SwiftUIで
あるViewに
onTapGestureを設定した際
中にある個々のViewをタップすることはできますが
その他の領域はタップしても反応しません。

例えば下記ようなVStackに対してonTapGestureを設定します。

import SwiftUI

struct ContentView: View {

    @State private var checked = false

    var body: some View {

        VStack(spacing: 20) {
            Image(systemName: checked ? "checkmark.seal.fill" : "checkmark.seal")
                .foregroundColor(checked ? .green : .gray)
            Text("画像とテキストのみTapできる")
        }
        .frame(width: 300, height: 200)
        .padding()
        .background(RoundedRectangle(cornerRadius: 20).stroke(Color.green, lineWidth: 1))
        // 👇🏻👇🏻👇🏻👇🏻👇🏻👇🏻👇🏻👇🏻👇🏻👇🏻👇🏻👇🏻👇🏻👇🏻👇🏻👇🏻👇🏻👇🏻👇🏻👇🏻
        .onTapGesture {
            self.checked.toggle()
        }
        .font(.title)
    }
}

struct ContentView_Previews: PreviewProvider {
    static var previews: some View {
        ContentView()
    }
}

上記の場合ですと
VStackの中の画像とテキストにしかタップできません。

cannottap720.gif

そんな時に活用できるのがcontentShapeです。
https://developer.apple.com/documentation/swiftui/vstack/3278318-contentshape

これを実行すると自身のhitテストを実行してくれるViewを返します。

今回は枠内をタップできるように設定します。


struct ContentView: View {

    @State private var checked = false

    var body: some View {

        VStack(spacing: 20) {
            Image(systemName: checked ? "checkmark.seal.fill" : "checkmark.seal")
                .foregroundColor(checked ? .green : .gray)
            Text("枠の中は全部Tapできる")
        }
        .frame(width: 300, height: 200)
        .padding()
        .background(RoundedRectangle(cornerRadius: 20).stroke(Color.green, lineWidth: 1))
        // 👇🏻👇🏻👇🏻👇🏻👇🏻👇🏻👇🏻👇🏻👇🏻👇🏻👇🏻👇🏻👇🏻👇🏻👇🏻👇🏻👇🏻👇🏻👇🏻👇🏻
        .contentShape(RoundedRectangle(cornerRadius: 20)) 
        .onTapGesture {
            self.checked.toggle()
        }
        .font(.title)
    }
}

struct ContentView_Previews: PreviewProvider {
    static var previews: some View {
        ContentView()
    }
}

すると下記のようにタップエリアを拡大することができます。
cantap720.gif

画像をタップできるようにしたいけれど
画像だけだとタップできる領域が狭い場合などに
コードを1行加えて領域を広げることができるのは
大変便利ですね😄

Why do not you register as a user and use Qiita more conveniently?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away