SwiftUI中如何通过拖拽实现视图水平缩放？现有方案存在问题

原代码存在两个核心问题导致缩放异常：

• 同时维护position和frame.width，造成视图位置与尺寸的逻辑冲突
• 错误处理拖拽的translation值，叠加计算导致缩放行为失控

以下是修正后的代码：

struct ScaleableView: View {
    @State private var frame: CGSize = .init(width: 500, height: 500)
    // 记录拖拽起始时的视图宽度，用于计算增量
    @State private var initialWidth: CGFloat = 500

    var body: some View {
        ZStack {
            // 可缩放的背景视图
            Rectangle()
                .border(Color.gray, width: 3)
                .foregroundColor(.white)
            
            // 右侧拖拽手柄
            Circle()
                .foregroundColor(.yellow)
                .frame(width: 15, height: 15)
                .position(x: frame.width, y: frame.height / 2)
                .gesture(
                    DragGesture()
                        .onStarted { _ in
                            // 拖拽开始时记录当前视图宽度
                            initialWidth = frame.width
                        }
                        .onChanged { gesture in
                            // 根据拖拽的X轴偏移量计算新宽度，限制最小宽度为100
                            let newWidth = initialWidth + gesture.translation.width
                            frame.width = max(newWidth, 100)
                        }
                )
        }
        .frame(width: frame.width, height: frame.height)
        // 让视图居中显示，无需手动维护position
        .position(CGPoint(x: UIScreen.main.bounds.width/2, y: UIScreen.main.bounds.height/2))
    }
}

关键修复点： #

1. 移除冗余的position状态：直接通过.position将视图固定在屏幕中心，避免手动调整位置带来的混乱
2. 记录初始宽度：拖拽开始时保存当前视图宽度，确保每次缩放都基于起始状态计算，避免累计偏移错误
3. 合理限制最小宽度：防止视图被缩放到不可见的程度，提升交互体验
4. 简化拖拽逻辑：直接用拖拽的X轴偏移量更新宽度，符合直观的拖拽缩放预期

内容的提问来源于stack exchange，提问作者Kutan Çıngısız