ios – Effectively Monitoring View and Display Sizes in SwiftUI Throughout Orientation Adjustments

I have been engaged on a SwiftUI undertaking the place I wanted to dynamically observe the scale of particular views and your complete system display. One problem was making certain that the scale updates correctly when the system orientation modifications with out breaking the format.

I created a reusable resolution utilizing GeometryReader and PreferenceKey. It captures each the subview measurement and the display measurement dynamically and could be utilized flexibly throughout completely different views. Under is the implementation.

I would love to listen to your ideas on this method or ideas for additional optimization!

import Basis
import SwiftUI

// PreferenceKey to retailer and replace the scale worth
struct DimensionKey: PreferenceKey {
    static let defaultValue: CGSize = .zero
    
    static func scale back(worth: inout CGSize, nextValue: () -> CGSize) {
        worth = nextValue()
    }
}

// Extension on View for reusable measurement monitoring modifiers
extension View {
    // Modifier for monitoring the scale of a particular content material view
    func contentSizePreferenceModifier(measurement: @escaping (CGSize) -> Void) -> some View {
        self
            .background(
                GeometryReader { proxy in
                    Colour.clear
                        .choice(key: DimensionKey.self, worth: proxy.measurement)
                        .onPreferenceChange(DimensionKey.self, carry out: measurement)
                }
            )
    }
    
    // Modifier for monitoring the display measurement
    func screenSizePreferenceModifier(measurement: @escaping (CGSize) -> Void) -> some View {
        ZStack {
            GeometryReader { proxy in
                Colour.yellow.ignoresSafeArea()
                    .choice(key: DimensionKey.self, worth: proxy.measurement)
                    .onPreferenceChange(DimensionKey.self, carry out: measurement)
            }
            self
        }
    }
}

// The primary view to reveal the utilization of measurement monitoring
struct DataView: View {
    @State personal var deviceSize: CGSize = .zero
    @State personal var contentSize: CGSize = .zero
    
    var physique: some View {
        VStack {
            Textual content("Account Info")
                .font(.largeTitle)
            
            Group {
                Textual content("Display Width: (deviceSize.width, specifier: "%.2f")")
                Textual content("Display Top: (deviceSize.top, specifier: "%.2f")")
                    .padding(.backside)
            }
            .font(.title)
            
            VStack {
                Textual content("Content material Width: (contentSize.width, specifier: "%.2f")")
                Textual content("Content material Top: (contentSize.top, specifier: "%.2f")")
            }
            .font(.title)
            .foregroundStyle(.white)
            .background(Colour.purple)
            .contentSizePreferenceModifier { measurement in
                contentSize = measurement
            }
        }
        .screenSizePreferenceModifier { measurement in
            deviceSize = measurement
        }
    }
}

// Preview for SwiftUI
#Preview {
    DataView()
}

The rationale I used ZStack is that it does not have an effect on the format of the view the modifier is utilized to. It’s because GeometryReader usually takes up all accessible house, which might disrupt the unique format. Through the use of ZStack, the modifier solely tracks the scale with out interfering with the precise content material view.

Any ideas for enhancements?