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

Posted 2023-02-24

【中文标题】SwiftUI 中图像按钮的可点击区域

【英文标题】：Tappable area of an Image Button in SwiftUI

【发布时间】：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))

【参考方案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()