SwiftUI 中图像按钮的可点击区域答案

【问题标题】：Tappable area of an Image Button in SwiftUISwiftUI 中图像按钮的可点击区域
【发布时间】：2021-03-23 18:28:07
【问题描述】：

我想在点击图像时关闭当前视图，但该图像的可点击区域大于实际图像（如图所示蓝色背景也是可点击的），如果我增加可点击的图像大小面积也增加了，如何去除图片周围的蓝色框，但仍然可以增加图片尺寸？

 Image("Cancel")
      .resizable()
      .scaledToFit()
      .contentShape(Circle())
      .frame(width: 50, height: 50)

      .background(Color.blue)
      .onTapGesture {
      presentationMode.wrappedValue.dismiss()
      }

Button Image

【问题讨论】：

SwiftPunk 的答案是正确的，但我只是复制粘贴了 Paul Hudson 在课程中教授的内容，它绝对完美，它还使周围的框架与图像 Image("Cancel") .renderingMode( .original) .clipShape(Circle()) .overlay(Circle().stroke(Color.black,lineWidth: 1))

标签： ios swift swiftui

【解决方案1】：

您需要像在代码中一样使用 clipShape：

import SwiftUI

struct ContentView: View {
    var body: some View {

        Image(systemName: "xmark.circle")
            .resizable()
            .scaledToFit()
            .frame(width: 50, height: 50)
            .background(Color.blue)
            .contentShape(Circle())
            .clipShape(Circle())
            .onTapGesture {
                presentationMode.wrappedValue.dismiss()
            }
        
    }
}

【讨论】：