Creating the Qt application

Our calculator has a button for each operation. While we could make each button a separate rectangle and MouseArea, it's far easier to make a single QML button that encapsulates the behavior of a button, including the change in appearance when you press on it, the placement of the button label, and so forth.

Create a new QML file by right-clicking on the project and choosing Add New..., and then, from the Qt items, choose QML File (Qt Quick 2). The button is a Rectangle object that contains a second Rectangle object, a Text label for the button, and a MouseArea object that handles button clicks. Name the file Button.qml, and edit it so that it reads as follows:

import QtQuick 2.12 
 
Rectangle { 
    id: button 
 
    width: 64 
    height: 64 
    property alias operation: buttonText.text 
    signal clicked 
 
    color: "green" 
...