SwiftUI中如何正确获取Image视图尺寸以用于拖拽手势计算？

嘿，这个问题我之前也踩过坑！直接用GeometryReader包裹Image的话，它会默认撑满父容器的可用空间，所以拿到的其实是ZStack的尺寸，不是Image实际显示的大小。下面给你几个靠谱的解决思路：

方法一：用.overlay嵌入GeometryReader #

把GeometryReader放在Image的overlay里，这样它会完全贴合Image的实际边界，拿到的就是Image真实的显示尺寸：

struct ContentView: View {
    @State private var imageSize: CGSize = .zero
    
    var body: some View {
        ZStack(alignment: .center) {
            Image(uiImage: UIImage(named: "test")!)
                .resizable()
                .aspectRatio(contentMode: .fit)
                .shadow(radius: 5)
                // 用透明颜色的overlay包裹GeometryReader，不影响视觉
                .overlay(
                    GeometryReader { reader in
                        Color.clear
                            .onAppear {
                                imageSize = reader.size
                            }
                            // 屏幕旋转等场景下尺寸变化时更新
                            .onChange(of: reader.size) { newSize in
                                imageSize = newSize
                            }
                    }
                )
                .gesture(dragGesture(forSize: imageSize))
        }
        .background(Color.red)
    }
    
    private func dragGesture(forSize size: CGSize) -> some Gesture {
        DragGesture()
            .onChanged { value in
                // 这里用真实的imageSize做归一化计算
                guard size.width > 0, size.height > 0 else { return }
                let normalizedX = value.location.x / size.width
                let normalizedY = value.location.y / size.height
                print("归一化坐标：(\(normalizedX), \(normalizedY))")
            }
    }
}

方法二：用.background替代overlay #

原理和overlay完全一样，只是把GeometryReader放在Image的背景层，效果相同，看个人习惯选择：

struct ContentView: View {
    @State private var imageSize: CGSize = .zero
    
    var body: some View {
        ZStack(alignment: .center) {
            Image(uiImage: UIImage(named: "test")!)
                .resizable()
                .aspectRatio(contentMode: .fit)
                .shadow(radius: 5)
                .background(
                    GeometryReader { reader in
                        Color.clear
                            .onAppear {
                                imageSize = reader.size
                            }
                            .onChange(of: reader.size) { newSize in
                                imageSize = newSize
                            }
                    }
                )
                .gesture(dragGesture(forSize: imageSize))
        }
        .background(Color.red)
    }
    
    // 拖拽手势方法同上
}

方法三：使用PreferenceKey（适合复杂布局） #

如果你的布局更复杂，需要在父视图中监听Image的尺寸变化，可以用SwiftUI的PreferenceKey机制，它专门用来在视图层级间传递尺寸这类布局信息：

首先定义一个自定义PreferenceKey：

struct ImageSizePreferenceKey: PreferenceKey {
    static var defaultValue: CGSize = .zero
    
    static func reduce(value: inout CGSize, nextValue: () -> CGSize) {
        value = nextValue()
    }
}

然后在ContentView中使用：

struct ContentView: View {
    @State private var imageSize: CGSize = .zero
    
    var body: some View {
        ZStack(alignment: .center) {
            Image(uiImage: UIImage(named: "test")!)
                .resizable()
                .aspectRatio(contentMode: .fit)
                .shadow(radius: 5)
                .background(
                    GeometryReader { reader in
                        Color.clear
                            .preference(key: ImageSizePreferenceKey.self, value: reader.size)
                    }
                )
                // 监听尺寸变化
                .onPreferenceChange(ImageSizePreferenceKey.self) { newSize in
                    imageSize = newSize
                }
                .gesture(dragGesture(forSize: imageSize))
        }
        .background(Color.red)
    }
    
    // 拖拽手势方法同上
}

关键注意点 #

• 一定要避免把GeometryReader直接作为Image的父容器，否则它会抢占父视图的所有可用空间，导致尺寸不准确。
• 记得在归一化时判断尺寸是否有效（width和height大于0），避免视图初始化时的除以0问题。

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