在SwiftUI中，如何通过动态变化的滚动区域来缩放scrollView中的内容？

Question

我正在用SwiftUI开发MacOS应用程序。

假设我们有一个固定大小的窗口，它将显示一个可滚动的图像。现在我想创建一个功能，可以让用户缩放图像，并可以滚动和查看窗口内缩放的图像。

问题是，一旦我放大图像，滚动区域似乎没有一起扩展，并且滚动区域不够大，无法到达图像的每一个角落。

struct ContentView: View {
    var body: some View {
        ScrollView([.horizontal, .vertical] , showsIndicators: true ){
            Image("test")
                .scaleEffect(2)
        }
        .frame(width: 500, height: 500)
    }
}

我曾尝试使用GeometryReader设置图像的边框，但得到了相同的结果。

MacOS 11.1，Xcode12.3

谢谢!

Answer 1

.scaleEffect似乎在视图上执行了可视转换，但实际上并不影响它的框架，所以ScrollView不知道如何适应较大的尺寸。

图片上的.resizable()和.frame似乎做到了这一点：

struct ContentView: View {
    @State private var scale : CGFloat = 1.0
    
    var body: some View {
        VStack {
            ScrollView([.horizontal, .vertical] , showsIndicators: true ){
                Image(systemName: "plus.circle")
                    .resizable()
                    .frame(width: 300 * scale,height: 300 * scale)
            }
            .frame(width: 500, height: 500)
            Slider(value: $scale, in: (0...5))
        }
    }
}