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

Posted 2023-02-24

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

【英文标题】：In SwiftUI, how to scale content inside scrollView with dynamic changing scrolling area?

【发布时间】：2021-02-21 01:54:37

【问题描述】：

我正在使用 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、Xcode 12.3

谢谢！

【参考方案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))