QML Scrolling Digits

English Български

[toc align_right="yes" depth="3"]

How to create scrolling digits component

Here is one way to easily create a scrolling digits component.

[YouTubeID:KLE4FdGc12U]

Code

First we create a component for digits:

Digit.qml

<br />import QtQuick 1.1

Rectangle {<br /> id: digitItem<br /> width: size<br /> height: size

clip: true

gradient: Gradient {<br /> GradientStop {<br /> position: 0.0<br /> color: &quot;black&amp;quot;<br /> }

GradientStop {<br /> position: 0.5<br /> color: &quot;#222222&amp;quot;<br /> }

GradientStop {<br /> position: 1.0<br /> color: &quot;black&amp;quot;<br /> }<br /> }

border.color: &quot;black&amp;quot;<br /> border.width: 1

property int digit: 0<br /> property int size: 20

onDigitChanged: { digitPath.currentIndex = digit; }

PathView {<br /> id: digitPath

width: digitItem.size<br /> height: digitItem.size * 10

interactive: false

anchors.centerIn: parent

model: [ 0, 1, 2, 3, 4, 5, 6, 7, 8, 9 ]

delegate: Text {<br /> width: digitItem.size<br /> height: digitItem.size

text: modelData;

color: &quot;white&amp;quot;;

horizontalAlignment: Text.AlignHCenter;<br /> verticalAlignment: Text.AlignVCenter;

font.pointSize: digitItem.size-4;<br /> }

preferredHighlightBegin: 0.5<br /> preferredHighlightEnd: 0.5

path: Path {<br /> startX: digitPath.width / 2<br /> startY: 0

PathLine { x: digitPath.width / 2; y: digitPath.height }<br /> }<br /> }<br />}<br />

The component is just a Rectangle with gradient. In its center we place a PathView and set clipping to true, so only the selected digit will be visible.

Than we create the ScrollingDigits component:

ScrollingDigits.qml

<br />import QtQuick 1.1

Row {<br /> id: scrollingDigits

property int number: 0<br /> property int positions: 5

Repeater {<br /> id: rep

model: scrollingDigits.positions

Digit {<br /> }<br /> }

onNumberChanged: {

var tmp = number

for( var i = 0; i &lt; positions; ++i ) {<br /> rep.itemAt( positions - i - 1).digit = tmp % 10<br /> tmp = Math.floor( tmp / 10 )<br /> }<br /> }<br />}<br />

We add two properties to Row: number and positions . number contains the number we want to display and positions is the number of digits we want.

Example

main.qml

<br />import QtQuick 1.1

Rectangle<br />{<br /> width: 400<br /> height: 400

color: &quot;gray&amp;quot;

ScrollingDigits {<br /> anchors.centerIn: parent

positions: 4

NumberAnimation on number {<br /> from: 15; to: 100<br /> duration: 50000<br /> }<br /> }<br />}<br />