QML Scrolling Digits/bg

From Qt Wiki
< QML Scrolling Digits
Revision as of 07:03, 24 February 2015 by Maintenance script (talk | contribs)
(diff) ← Older revision | Latest revision (diff) | Newer revision → (diff)
Jump to navigation Jump to search
The printable version is no longer supported and may have rendering errors. Please update your browser bookmarks and please use the default browser print function instead.




Български English

[toc align_right="yes&quot; depth="2&quot;]

Как да направим скролиращи се числа

Ето един начин как бързо и лесно да направите скролиращи се числа.

[YouTubeID:KLE4FdGc12U]

Код

Първо създаваме компонент за всяка цифра:

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

Компонентът е един правоъгълник, в който центрираме PathView и включваме клипирането, за да виждаме само текущата цифра.

След това създавеме самия компонент за скролиращите се цифри:

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

Добавяме две нови свойства към Row елемента - number и positions . number съдържа числото, което искате да покажете, а position в колко позиции да се изписва.

Пример:

main.qml


import QtQuick 1.1

Rectangle
{
width: 400
height: 400

color: "gray&quot;

ScrollingDigits {
anchors.centerIn: parent

positions: 4

NumberAnimation on number {
from: 15; to: 100
duration: 50000
}
}
}