Qt wiki will be updated on October 12th 2023 starting at 11:30 AM (EEST) and the maintenance will last around 2-3 hours. During the maintenance the site will be unavailable.
QML Scrolling Digits
Jump to navigation
Jump to search
How to create scrolling digits component
Here is one way to easily create a scrolling digits component.
Code
First we create a component for digits:
Digit.qml
import QtQuick 1.1
Rectangle {
id: digitItem
width: size
height: size
clip: true
gradient: Gradient {
GradientStop {
position: 0.0
color: "black"
}
GradientStop {
position: 0.5
color: "#222222"
}
GradientStop {
position: 1.0
color: "black"
}
}
border.color: "black"
border.width: 1
property int digit: 0
property int size: 20
onDigitChanged: { digitPath.currentIndex = digit; }
PathView {
id: digitPath
width: digitItem.size
height: digitItem.size * 10
interactive: false
anchors.centerIn: parent
model: [ 0, 1, 2, 3, 4, 5, 6, 7, 8, 9 ]
delegate: Text {
width: digitItem.size
height: digitItem.size
text: modelData;
color: "white";
horizontalAlignment: Text.AlignHCenter;
verticalAlignment: Text.AlignVCenter;
font.pointSize: digitItem.size-4;
}
preferredHighlightBegin: 0.5
preferredHighlightEnd: 0.5
path: Path {
startX: digitPath.width / 2
startY: 0
PathLine { x: digitPath.width / 2; y: digitPath.height }
}
}
}
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
import QtQuick 1.1
Row {
id: scrollingDigits
property int number: 0
property int positions: 5
Repeater {
id: rep
model: scrollingDigits.positions
Digit {
}
}
onNumberChanged: {
var tmp = number
for( var i = 0; i < positions; ++i ) {
rep.itemAt( positions - i - 1).digit = tmp % 10
tmp = Math.floor( tmp / 10 )
}
}
}
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
import QtQuick 1.1
Rectangle
{
width: 400
height: 400
color: "gray"
ScrollingDigits {
anchors.centerIn: parent
positions: 4
NumberAnimation on number {
from: 15; to: 100
duration: 50000
}
}
}