如何防止SwiftUI矩形在拖拽手势中超出活动区域

要约束拖拽的矩形始终在指定区域内，核心是计算允许的偏移范围，并在拖拽过程中对位置进行边界限制。具体实现步骤如下：

关键思路 #

1. 获取父容器（活动区域）的尺寸
2. 获取拖拽视图自身的尺寸
3. 根据两者尺寸计算出允许的最大/最小偏移量，确保视图边缘不会超出活动区域
4. 在拖拽手势的onChanged回调中，将新位置限制在计算好的范围内

修改后的完整代码 #

struct ContentView: View {
    @State var position = CGSize.zero
    @State var lastPosition = CGSize.zero
    @State private var parentSize = CGSize.zero
    @State private var dragViewSize = CGSize.zero
    
    var body: some View {
        ZStack {
            // 获取父容器（活动区域）的尺寸
            GeometryReader { geo in
                Color.clear
                    .onAppear {
                        parentSize = geo.size
                    }
                    .onChange(of: geo.size) { newSize in
                        parentSize = newSize
                    }
            }
            
            Rectangle()
                .fill(Color(red: 0.545, green: 0.545, blue: 0.545))
                .aspectRatio(0.75, contentMode: .fit)
                .frame(height: 550)
                .cornerRadius(30)
                // 获取拖拽视图自身的尺寸
                .background(
                    GeometryReader { geo in
                        Color.clear
                            .onAppear {
                                dragViewSize = geo.size
                            }
                            .onChange(of: geo.size) { newSize in
                                dragViewSize = newSize
                            }
                    }
                )
                .offset(x: position.width, y: position.height)
                // 仅在position变化时触发动画
                .animation(.spring(response: 0.4, dampingFraction: 0.4, blendDuration: 0.4), value: position)
                .gesture(
                    DragGesture()
                        .onChanged { value in
                            // 计算当前拖拽的临时位置
                            let tempX = lastPosition.width + value.translation.width
                            let tempY = lastPosition.height + value.translation.height
                            
                            // 计算允许的偏移范围：确保视图边缘不超出父容器
                            let maxX = (parentSize.width - dragViewSize.width) / 2
                            let minX = -maxX
                            let clampedX = min(max(tempX, minX), maxX)
                            
                            let maxY = (parentSize.height - dragViewSize.height) / 2
                            let minY = -maxY
                            let clampedY = min(max(tempY, minY), maxY)
                            
                            // 应用约束后的位置
                            position = CGSize(width: clampedX, height: clampedY)
                        }
                        .onEnded { value in
                            lastPosition = position
                        }
                )
                .padding()
        }
    }
}

代码说明 #

• 尺寸获取：通过GeometryReader分别获取父容器和拖拽视图的尺寸，并监听尺寸变化（适配屏幕旋转等场景）
• 边界计算：
  • X轴偏移：最大偏移量为父容器宽度与视图宽度差值的一半（正负值对应左右边界）
  • Y轴偏移：同理计算上下边界
• 位置约束：使用min(max(tempValue, minValue), maxValue)的方式，将临时拖拽位置限制在合法范围内
• 动画优化：将动画绑定到position值，避免不必要的动画触发

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