SwiftUI缩放状态下ScrollView内图片无法平移,如何同时支持缩放和平移?
问题根因
scaleEffect仅会修改视图的渲染效果,不会改变视图的实际布局尺寸,因此ScrollView的可滚动区域始终等于原图大小,放大后超出屏幕的部分不会被识别为可滚动内容,就无法平移。
修复方案
缩放时同步更新图片的实际布局尺寸,让ScrollView的可滚动区域跟随缩放比例动态变化,ScrollView本身会自动适配内容尺寸实现平移,不需要额外添加拖动手势。
struct TestView: View { let image = UIImage(named: "test")! @State private var scale: CGFloat = 1.0 @State private var lastScaleValue: CGFloat = 1.0 // 缩放上下限可根据需求自行调整 private let minScale: CGFloat = 1.0 private let maxScale: CGFloat = 5.0 var body: some View { GeometryReader { geo in // 按原图比例计算基础展示尺寸 let baseWidth = geo.size.width let baseHeight = baseWidth * image.size.height / image.size.width ScrollView([.vertical, .horizontal], showsIndicators: false) { Image(uiImage: image) .resizable() .aspectRatio(contentMode: .fit) // 直接用缩放比例修改图片实际布局尺寸 .frame(width: baseWidth * scale, height: baseHeight * scale) .gesture( MagnificationGesture() .onChanged { val in let delta = val / lastScaleValue lastScaleValue = val let newScale = scale * delta // 限制缩放范围 scale = max(minScale, min(newScale, maxScale)) } .onEnded { _ in lastScaleValue = 1.0 // 可选:小于最小比例时自动回弹 if scale < minScale { withAnimation { scale = minScale } } } ) } .frame(width: geo.size.width, height: geo.size.height) .border(Color.red) .background(Color.systemBackground.edgesIgnoringSafeArea(.all)) } } }
内容的提问来源于stack exchange,提问作者zumzum
相关产品推荐
相关产品推荐

