SwiftUI弓箭靶图点击位置注册异常问题求助

问题分析 #

你遇到的两个核心问题根源都是坐标空间不匹配和布局约束缺失：

• 靶图初始位置异常：ZStack未占据足够空间，导致靶图无法在Text下方稳定居中
• 点击偏移：使用全局坐标空间后，未将点击位置转换为靶图的本地坐标，硬编码偏移无法适配不同设备尺寸

修改后的完整代码 #

import SwiftUI

struct Practice: View {
    @EnvironmentObject var someQuiver : Quiver
    @State private var tapLocation: CGPoint? = nil
    
    var body: some View {
        VStack(spacing: 20) {
            Text("PRACTICE")
                .font(.title)
            
            // 让ZStack占满剩余空间，确保靶图始终居中
            ZStack {
                Image("Target")
                    .resizable()
                    .scaledToFit()
                    .coordinateSpace(name: "TargetSpace") // 给靶图设置专属坐标空间
                    .onTapGesture(coordinateSpace: .named("TargetSpace")) { location in
                        tapLocation = location // 直接获取靶图本地坐标
                        print("靶图内点击位置：\(location)")
                    }
                
                // 使用靶图本地坐标定位指示器
                if let location = tapLocation {
                    Image(systemName: "smallcircle.fill.circle")
                        .foregroundColor(.red)
                        .position(location)
                }
            }
            .frame(maxWidth: .infinity, maxHeight: .infinity) // 占满VStack剩余空间
            .padding()
        }
        .padding()
    }
}

关键修改点说明 #

• 靶图始终居中：

  • 给ZStack添加frame(maxWidth: .infinity, maxHeight: .infinity)，让它占据VStack中Text下方的所有可用空间，ZStack默认会将内部内容居中，因此靶图会始终保持在屏幕中央区域
  • 调整VStack的spacing替代零散padding，布局逻辑更清晰可控

• 动态适配点击位置：

  • 给靶图添加coordinateSpace(name: "TargetSpace")，创建专属的局部坐标空间
  • onTapGesture指定使用这个专属坐标空间，此时获取的location是相对于靶图自身的坐标（原点在靶图左上角）
  • 指示器直接使用这个location设置position，完全不需要硬编码偏移，自动适配任何设备和靶图尺寸

额外优化建议 #

• 可以用aspectRatio(contentMode: .fit)替代scaledToFit()，效果一致但布局约束更明确
• 如果需要将点击位置转换为全局坐标或其他空间坐标，可以使用GeometryReader的convert(_:from:)方法，示例：

  GeometryReader { proxy in
      let globalLocation = proxy.convert(location, from: .named("TargetSpace"))
      print("全局坐标：\(globalLocation)")
  }
  

内容的提问来源于stack exchange，提问作者Michael McBride