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: Difference between revisions

From Qt Wiki
Jump to navigation Jump to search
No edit summary
 
(Sub-categorize)
 
(5 intermediate revisions by 3 users not shown)
Line 1: Line 1:
'''English''' [[QML Scrolling Digits Bulgarian|Български]]
{{LangSwitch}}
[[Category:Snippets::QML]]
[[Category:HowTo]]
[[Category:Developing with Qt::Qt Quick::QML]]


=How to create scrolling digits component=
= How to create scrolling digits component =


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


==Code==
[https://www.youtube.com/watch?v=KLE4FdGc12U YouTube Video]
 
== Code ==


First we create a component for digits:
First we create a component for digits:


===Digit.qml===
=== Digit.qml ===
 
<code>
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 }
}
}
}
</code>


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.
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.
Line 15: Line 94:
Than we create the ScrollingDigits component:
Than we create the ScrollingDigits component:


===ScrollingDigits.qml===
=== ScrollingDigits.qml ===
 
<code>
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 )
}
}
}
</code>


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.
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==
== Example ==
 
=== main.qml ===
 
<code>
import QtQuick 1.1
 
Rectangle
{
width: 400
height: 400


===main.qml===
color: "gray"


===Categories:===
ScrollingDigits {
anchors.centerIn: parent


* [[:Category:Developing with Qt|Developing_with_Qt]]
positions: 4
** [[:Category:Developing with Qt::Qt-Quick|Qt Quick]]
* [[:Category:Developing with Qt::Qt-Quick::QML|QML]]


* [[:Category:HowTo|HowTo]]
NumberAnimation on number {
* [[:Category:snippets|snippets]]
from: 15; to: 100
duration: 50000
}
}
}
</code>

Latest revision as of 13:07, 28 November 2016

En Ar Bg De El Es Fa Fi Fr Hi Hu It Ja Kn Ko Ms Nl Pl Pt Ru Sq Th Tr Uk Zh

How to create scrolling digits component

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

YouTube Video

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