Create a new Qt Quick UI 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:
import QtQuick 2.0
Clock {
id: clock
width: 400
height: 400
}Then, add the new QML file to the project and call it Clock.qml. Let's start by declaring a circular clock plate:
import QtQuick 2.0
Item {
id: clock
property color color: "lightgray"
Rectangle {
id: plate
anchors.centerIn: parent
width: Math.min(clock.width, clock.height)
height: width
radius: width/2
color: clock.color
border.color: Qt.darker(color)
border.width: 2
}
}If you run the program now, you'll see a plain gray circle hardly resembling a clock plate:
