Difference between revisions of "QML Scrolling Digits/bg"

From Qt Wiki
Jump to: navigation, search
(Remove non-functioning "toc" command)
 
(3 intermediate revisions by the same user not shown)
Line 1: Line 1:
 +
{{Cleanup | reason=Auto-imported from ExpressionEngine.}}
 +
 
[[Category:Snippets]]
 
[[Category:Snippets]]
 
[[Category:HowTo]]
 
[[Category:HowTo]]
Line 6: Line 8:
 
'''Български''' [[QML_Scrolling_Digits|English]]
 
'''Български''' [[QML_Scrolling_Digits|English]]
  
[toc align_right="yes" depth="2"]
 
  
 
= Как да направим скролиращи се числа =
 
= Как да направим скролиращи се числа =
Line 12: Line 13:
 
Ето един начин как бързо и лесно да направите скролиращи се числа.
 
Ето един начин как бързо и лесно да направите скролиращи се числа.
  
[YouTubeID:KLE4FdGc12U]
+
https://www.youtube.com/watch?v=KLE4FdGc12U
  
 
== Код ==
 
== Код ==

Latest revision as of 12:27, 17 April 2015

БългарскиEnglish

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

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

https://www.youtube.com/watch?v=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
}
}

}