Creating advanced QML components

By now, you should be familiar with the very basics of QML and Qt Quick. Now, we can start combining what you know and fill the gaps with more information to build more advanced QML components. Our target will be to display an analog clock.

Time for action – A simple analog clock application

Create a new Qt Quick Application - Empty project. To create a clock, we will implement a component representing the clock needle, and we will use instances of that component in the actual clock element. In addition to this, we will make the clock a reusable component; therefore, we will create it in a separate file and instantiate it from within main.qml:

Window {
    visible: true
    width: 640
    height: 480
    title: qsTr("Hello World")

    Clock {
        id: clock
        anchors {
            fill: parent
            margins: 20
        }
    }
}

We use the anchors property group to expand the item to fit the whole window except for the 20-pixel margin for all...