Example of a Classic Calculator Display - right adjusted numbers - with indenpendent scrolling lines - in SwiftUI

CalculatorDisplayExample

//
//  DisplayView.swift
//  ExampleCalculatorDisplay
//
//  Created by David on 11/16/23.
//

import SwiftUI

struct DisplayView: View {
    @EnvironmentObject var env: EnvironmentGlobal
    
    var body: some View {
        let screenWidth             : CGFloat  = UIScreen.main.bounds.width
        let _                       : CGFloat  = UIScreen.main.bounds.height
        //  screenHeight
        
        let innerPadding            : CGFloat  = 20.0
        let outerPadding            : CGFloat  = 15.0
        let rowSpace                : CGFloat  = 0
        let textSpace               : CGFloat  = 0
        
        let displayWidth = screenWidth - (2*outerPadding)
        
        Spacer()
        Group {

            VStack(alignment: .trailing, spacing: rowSpace) {
                Spacer()    // allow top spacer - moving line1 to bottom
                
                // DisplayLine4 - right aligned while vertical scrolling
                ScrollView {
                    HStack(alignment: .firstTextBaseline, spacing: textSpace) {
                        Spacer()
                        Text(env.calculatorLine4)
                    }
                    .foregroundColor(.blue)
                }   // scrollView
                .scrollIndicators(.visible, axes: .horizontal)
                
                // DisplayLine3
                ScrollView() {
                    HStack(alignment: .firstTextBaseline, spacing: textSpace) {
                        Spacer()    // move text to right
                        Text(env.calculatorLine3)

                    }
                    .foregroundColor(.orange)
                }   // scrollView
                .scrollIndicators(.visible, axes: [.vertical, .horizontal])
                
                // DisplayLine2 - horiz doesn't work
                ScrollView(.horizontal) {
                    HStack(alignment: .firstTextBaseline, spacing: textSpace) {
                        Spacer()
                        Text(env.calculatorLine2)
                    }
                    .foregroundColor(.green)
                }   // scrollView
                .scrollIndicators(.visible, axes: .horizontal)
                
                // DisplayLine1 - horiz doesn't work
                ScrollView(.horizontal) {
                    HStack(alignment: .firstTextBaseline, spacing: textSpace) {
                        Spacer()
                        Text(env.calculatorLine1)
                    }
                    .foregroundColor(.pink)
                }   // scrollView
                .scrollIndicators(.automatic, axes: [.horizontal])
                
            } // vStack
            .lineLimit(1)
           
            

            
        } // group - the display frame
        .padding(.horizontal, innerPadding)     // before frame
        .padding(.vertical, innerPadding)       // inside frame
        .frame(width: displayWidth, height: 200)
        .background(Color.white)
        .border(Color.blue)
        
    }
    

}


struct DisplayView_Previews: PreviewProvider {

    static var env = EnvironmentGlobal(line1: "line 1",
                                       line2: "line 2 = 5",
                                       line3: "line 3 = 10;",
                                       line4: "line 4 = 20")
    
    static var previews: some View {
        
        @State var navPath = NavigationPath()
        
        NavigationStack(path: $navPath ) {
            ZStack(alignment: .top) {
                VStack() {
                    // Equation Display
                    DisplayView()
                        .environmentObject( env )
                    Spacer()
                }
            }
        }
    }
}


//
//  ContentView.swift
//  ExampleCalculatorDisplay
//
//  Created by David on 11/16/23.
//

import SwiftUI

struct ContentView: View {
    var body: some View {
        VStack {
            Text("Imagine a Calculator Display")
            Text("It is right (trailing) aligned.")
            Image(systemName: "globe")
                .imageScale(.large)
                .foregroundStyle(.tint)
            
            DisplayView()
            
            Spacer()
        }
        .padding()
    }
}

#Preview {
    ContentView()
        .environmentObject( EnvironmentGlobal(line1: "line 1",
                              line2: "line 2",
                              line3: "line 3",
                              line4: "line 4")
                            )
}


//
//  EnvironmentGlobal.swift
//  ExampleCalculatorDisplay
//
//  Created by David on 11/16/23.
//

import Foundation

class EnvironmentGlobal: ObservableObject {
    
    @Published var calculatorLine4 = ""
    @Published var calculatorLine3 = ""
    @Published var calculatorLine2 = ""
    @Published var calculatorLine1 = ""
    
    init(line1: String, line2: String, line3: String, line4: String) {
        // RESET the Calculator memories
        // clear all displays and reset flags
        
        calculatorLine4 = line4
        calculatorLine3 = line3
        calculatorLine2 = line2
        calculatorLine1 = line1
    }
}