SwiftUI中拖拽Image时视图闪烁问题求助

问题场景 #

想要通过拖拽Image组件触发整个视图的拖拽功能，但将手势绑定在Image上时会出现视图闪烁的情况。如果把手势移到外层ZStack上，闪烁消失，但又无法限制只有Image能触发拖拽。

问题原因 #

闪烁的根源在于：当拖拽Image时，整个ZStack会跟着偏移，而Image的手势识别是基于自身的局部坐标系。随着视图偏移，Image的位置不断变化，导致手势的translation计算出现反复重置，进而引发视图频繁重绘，产生闪烁。

解决方法 #

给DragGesture指定全局坐标系（或父容器的坐标系），让手势的位置计算基于固定的参考系，不受视图偏移的影响。这样即使整个视图移动，手势的识别逻辑也能保持稳定，避免闪烁。

修正后的代码 #

import SwiftUI
struct MyGestureView: View {
    var x: CGFloat = 200
    var y: CGFloat = 200
    @GestureState var dragGesture = CGSize.zero
    @State var startPosition = CGSize.zero
    
    var body: some View {
        ZStack {
            Rectangle()
                .fill(Color.red)
                .stroke(Color.white, lineWidth: 0.8)
                .frame(width: 180, height: 50)
                .cornerRadius(10)
                .contentShape(Rectangle())
            Text("hello")
                .frame(width: 180, height: 50)
                .foregroundColor(.white)
            Image(systemName: "gobackward")
                .foregroundColor(.white)
                .background(.gray)
                .clipShape(Circle())
                .offset(x: 90, y: 25)
                // 关键修改：指定全局坐标系
                .gesture(DragGesture(coordinateSpace: .global)
                    .updating($dragGesture, body: { value, state, _ in
                        state = value.translation
                    })
                    .onEnded { value in
                        startPosition.width += value.translation.width
                        startPosition.height += value.translation.height
                    })
        }
        .position(x: x, y: y)
        .offset(x: startPosition.width + dragGesture.width, y: startPosition.height + dragGesture.height)
    }
}

#Preview {
    MyGestureView()
}

关键修改说明 #

在创建DragGesture时添加coordinateSpace: .global，让手势的位置计算基于全局屏幕坐标系，不再受Image自身位置变化的影响。这样拖拽过程中，translation的计算会持续稳定，不会因为视图偏移而触发重复的手势识别，彻底解决闪烁问题，同时保留只有Image能触发拖拽的需求。

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