QML Scrolling Digits/bg

From Qt Wiki
< QML Scrolling Digits
Revision as of 16:22, 3 March 2015 by AutoSpider (talk | contribs) (Add "cleanup" tag)
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.
This article may require cleanup to meet the Qt Wiki's quality standards. Reason: Auto-imported from ExpressionEngine.
Please improve this article if you can. Remove the {{cleanup}} tag and add this page to Updated pages list after it's clean.

Български English

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

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

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

[YouTubeID:KLE4FdGc12U]

Код

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

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

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

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

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

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

Пример:

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

}