Time for action – a simple analog clock application

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 ...

Get Game Programming Using Qt now with the O’Reilly learning platform.

O’Reilly members experience books, live events, courses curated by job role, and more from O’Reilly and nearly 200 top publishers.