SwiftUI中OnTapGesture总是识别超出视图范围的点击问题

我是Swift新手，正在做个人项目，最近一周遇到个解决不了的问题：

不管怎么设置，点击我做的90x90图片外部约10像素的区域时，OnTapGesture仍会触发。要是把手势加到仅和文本等大的VStack上，点击VStack外部区域也会触发手势。

我试过用.contentShape(Rectangle())、.clipped()，还把手势放在代码各个位置，但这些修饰符完全没用——加到父ZStack、Group和VStack上都没效果，现在只能瞎试组合。

相关代码 #

import SwiftUI

struct MainStatsView: View {
    
    var stat: StatElements
    
    var body: some View {
        
        ZStack {
            
            Group {
                
                Image(stat.borderName)
                    .resizable()
                    .aspectRatio(contentMode: .fit)
                    .frame(width: 90,
                           height: 90)
                
                VStack {
                    Text(stat.statName)
                    Text("+" + String(stat.statModifier))
                    Text(String(stat.statValue))
                }
                .font(.caption)
            }
           
        }
        .frame(width: 90,
               height: 90)
        .contentShape(Rectangle())
        .clipped()
        .onTapGesture {
            print ("something")
        }
        
    }
}

struct MainStatsView_Previews: PreviewProvider {
    static var previews: some View {
        MainStatsView(stat: StatElements(statName: "test", statModifier: 2, statValue: 1) )
    }
}

效果说明 #

• 视图预览：显示一个90x90的带边框图片，上方叠加三行文本的组件
• 演示情况：点击组件外部约10像素的区域时，点击事件仍会被触发

解决方法 #

问题出在容器视图的布局扩展上，下面两种方案都能解决：

方案一：限定Group的点击范围

把.frame、.contentShape和手势直接绑定到包含所有内容的Group上，确保点击范围严格对应90x90区域：

import SwiftUI

struct MainStatsView: View {
    
    var stat: StatElements
    
    var body: some View {
        
        ZStack {
            Group {
                Image(stat.borderName)
                    .resizable()
                    .aspectRatio(contentMode: .fit)
                    .frame(width: 90, height: 90)
                
                VStack {
                    Text(stat.statName)
                    Text("+" + String(stat.statModifier))
                    Text(String(stat.statValue))
                }
                .font(.caption)
            }
            .frame(width: 90, height: 90)
            .contentShape(Rectangle())
            .onTapGesture {
                print("something")
            }
        }
        
    }
}

方案二：强制ZStack固定尺寸

给ZStack加上.fixedSize()，强制它严格遵循设定的90x90尺寸，避免额外的点击区域：

import SwiftUI

struct MainStatsView: View {
    
    var stat: StatElements
    
    var body: some View {
        
        ZStack {
            Group {
                Image(stat.borderName)
                    .resizable()
                    .aspectRatio(contentMode: .fit)
                    .frame(width: 90, height: 90)
                
                VStack {
                    Text(stat.statName)
                    Text("+" + String(stat.statModifier))
                    Text(String(stat.statValue))
                }
                .font(.caption)
            }
        }
        .frame(width: 90, height: 90)
        .fixedSize()
        .contentShape(Rectangle())
        .onTapGesture {
            print("something")
        }
        
    }
}

原理说明 #

SwiftUI的容器视图（比如ZStack）有时候会根据子视图的布局自动扩展可点击区域，.fixedSize()能强制容器保持你设定的尺寸；而把.contentShape直接加到承载所有内容的Group上，能精准限定手势的触发范围，不会出现超出组件的点击响应。

内容的提问来源于stack exchange，提问作者Ovidiu Manea