Creating a Draggable Calculator Interface in SwiftUI

I am designing a unique calculator interface inspired by the stage manager, desktop experience, and Group FaceTime concepts. The interface consists of three draggable widgets that serve different purposes. The first widgets acts as the display for the calculator, providing a blank canvas for the calculations. The second widget contains scientific buttons, allowing users to perform advanced mathematical operations. The third widget consists of basic calculator buttons for standard arithmetic functions. By combining these elements, the calculator aims to provide a versatile and intuitive user experience.

How can I implement a draggable interface for a calculator in SwiftUI that matches the image of my design below, where the user can interact with three separate rectangles representing the calculator display, working scientific buttons, and working basic calculator buttons?

The design I'm trying to follow and the individual widgets are shown in this image:

Here's a minimal SwiftUI code example that represents my attempt at the described draggable calculator interface:

struct ContentView: View {
    @State private var displayPosition: CGSize = .zero
    @State private var scientificButtonsPosition: CGSize = .zero
    @State private var basicButtonsPosition: CGSize = .zero
    
    var body: some View {
        ZStack {
            Color.gray.opacity(0.2)
                .ignoresSafeArea()
            
            DraggableRectangle(position: $displayPosition, color: .white) {
                // Calculator Display
                // Customize the view as per your requirements
                Text("Display")
                    .font(.title)
            }
            
            DraggableRectangle(position: $scientificButtonsPosition, color: .blue) {
                // Scientific Buttons
                // Customize the view as per your requirements
                Text("Scientific Buttons")
                    .font(.headline)
                    .foregroundColor(.white)
            }
            
            DraggableRectangle(position: $basicButtonsPosition, color: .green) {
                // Basic Calculator Buttons
                // Customize the view as per your requirements
                Text("Basic Buttons")
                    .font(.headline)
                    .foregroundColor(.white)
            }
        }
        .frame(minWidth: 800, minHeight: 600)
    }
}

struct DraggableRectangle<Content: View>: View {
    @Binding var position: CGSize
    let color: Color
    let content: () -> Content
    
    var body: some View {
        content()
            .frame(width: 400, height: 300)
            .background(color)
            .cornerRadius(8)
            .offset(position)
            .gesture(
                DragGesture()
                    .onChanged { value in
                        position = value.translation
                    }
                    .onEnded { _ in
                        position = .zero
                    }
            )
    }
}

Accepted Reply

Fortunately, I did find a solution to my problem. No need to answer my question anymore.

Replies

Fortunately, I did find a solution to my problem. No need to answer my question anymore.