In SwiftUI, how to scale content inside scrollView with dynamic changing scrolling area?

Question

I'm developing MacOS App with SwiftUI.

Let's say we have a fixed size window, which will show a scrollable image. Now I want to create a feature which can let user to scale the image, and can scroll and view the scaled image inside the window.

The problem is, once I scaled up the image, the scroll area seems not expended together, and the scroll area is not big enough to reach each corner of the image.

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

I have tried to set the Image's frame by using GeometryReader, but got the same result.

MacOS 11.1, Xcode 12.3

Thanks!

score 3 · Accepted Answer · answered Feb 21 '21 at 02:04

.scaleEffect seems to perform a visual transform on the view without actually affecting its frame, so the ScrollView doesn't know to accommodate the bigger size.

.resizable() and .frame on the image seem to do the trick:

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))
        }
    }
}

In SwiftUI, how to scale content inside scrollView with dynamic changing scrolling area?

1 Answers1