How to zoom in and zoom out a SwiftUI view?

In a macOS or iOS app, you can easily add a zoom feature to any SwiftUI view with the scaleEffect modifier. In the below example, I am using a Slider to control the zoom level. Here’s how you can implement zooming in and out with a slider:

Example with Slider to Zoom:

import SwiftUI

struct ZoomableView: View {
    @State private var scale: CGFloat = 1.0
    
    var body: some View {
        VStack {
            Text("Use Slider to Zoom")
                .font(.largeTitle)
                .padding()
                .scaleEffect(scale) // Apply the scale effect

            Slider(value: $scale, in: 0.5...3.0, step: 0.1) {
                Text("Zoom Level")
            }
            .padding()
        }
        .frame(width: 400, height: 300)
    }
}

struct ContentView: View {
    var body: some View {
        ZoomableView()
    }
}

@main
struct MyApp: App {
    var body: some Scene {
        WindowGroup {
            ContentView()
        }
    }
}

Explanation:

• scaleEffect(scale): This applies the zoom to the view based on the scale value.
• Slider(value: $scale, in: 0.5...3.0, step: 0.1): The slider allows zoom control, where the zoom level ranges between 0.5x (zoom out) to 3.0x (zoom in). You can adjust this range as needed.
• step: 0.1: Defines how finely the slider adjusts the scale.

This setup gives you a smooth zoom experience using the slider in a macOS or iOS app. I have shown the zoom on a Text view but you can use this technique with other SwiftUI views too.