如何在SwiftUI中放大ScrollView

Question

我正在尝试在Catalyst应用程序的SwiftUI中缩放和平移图像。没有PanGesture，但是ScrollView在iPad和Mac上似乎都可以很好地工作。我只是无法在放大的图像上滚动。

struct TestScrollView: View {
    @State var scale: CGFloat = 1.0
    
    var body: some View {
        VStack {
            ScrollView([.horizontal,.vertical], showsIndicators: false) {
                    Image("image")
                        .resizable()
            }
            .gesture(MagnificationGesture()
            .onChanged({ (scale) in
                self.scale = scale
            }))
                .scaleEffect(self.scale)
        }
    }
}

并使用以下代码...

ScrollView([.horizontal,.vertical], showsIndicators: false) {
    Image("large_image")
        .resizable()
        .gesture(MagnificationGesture()
                    .onChanged({ (scale) in
                        self.scale = scale
                    }))
        .scaleEffect(self.scale)
}

...我明白了：

它似乎向右滚动很多，但在左侧被切断了。

Answer 1

将手势附加到图像上，例如

ScrollView([.horizontal,.vertical], showsIndicators: false) {
    Image("large_image")
        .resizable()
        .gesture(MagnificationGesture()
                    .onChanged({ (scale) in
                        self.scale = scale
                    }))
        .scaleEffect(self.scale)
}

Answer 2

在应用scaleEffect之后，内容的帧大小似乎保持不变，这就是为什么您无法在ScrollView内滚动。无处可滚动。您可以通过在缩放后手动指定帧大小来解决此问题。如果您不知道原始帧大小，请在动态缩放后使用GeometryReader计算帧大小。

ScrollView([.horizontal, .vertical], showsIndicators: false) {
    Image(systemName: "square.fill")
        .resizable()
        .frame(width: 200, height: 200)
        .scaleEffect(self.scale)
        .frame(
            width: 200 * self.scale,
            height: 200 * self.scale
        )
}
.gesture(magnificationGesture)

此外，您的MagnificationGesture的{​​{1}}实现存在一些问题。请参阅詹姆斯的this answer。