💻

SwiftUIのLazyVGridなどでグリッド部分をタップエリアごと切り抜く方法

2021/02/13に公開

LazyVGridを使っているときに、画像を表示したあとタップすると、他の画像をタップしたと認識されてしまうことがあった。
それはこんな感じでやっていたから、画像の大きさだけ、タップ範囲が広がっていたからだ。

struct PhotoGridView: View {
    var body: some View {
        Image(uiImage: image)
            .resizable()
            .aspectRatio(contentMode: .fill)
    }
}

これを直すためには .clipShage() で任意の形にclipしてあげればいい。

struct PhotoGridView: View {
    var body: some View {
        Image(uiImage: image)
            .resizable()
            .aspectRatio(contentMode: .fill)
            .clipShape(
                Rectangle()
            )
    }
}

Discussion