Difference between revisions of "QML Scrolling Digits/bg"

From Qt Wiki
Jump to: navigation, search
 
Line 1: Line 1:
[[Category:Snippets]]<br />[[Category:HowTo]]<br />[[Category:Developing_with_Qt::Qt Quick]]<br />[[Category:Developing_with_Qt::Qt Quick::QML]]
+
[[Category:Snippets]]
 +
[[Category:HowTo]]
 +
[[Category:Developing_with_Qt::Qt Quick]]
 +
[[Category:Developing_with_Qt::Qt Quick::QML]]
  
 
'''Български''' [[QML_Scrolling_Digits|English]]
 
'''Български''' [[QML_Scrolling_Digits|English]]
  
[toc align_right=&quot;yes&amp;quot; depth=&quot;2&amp;quot;]
+
[toc align_right="yes" depth="2"]
  
 
= Как да направим скролиращи се числа =
 
= Как да направим скролиращи се числа =
Line 15: Line 18:
 
Първо създаваме компонент за всяка цифра:
 
Първо създаваме компонент за всяка цифра:
  
Digit.qml<br /><code><br />import QtQuick 1.1
+
Digit.qml
 +
<code>
 +
import QtQuick 1.1
  
Rectangle {<br /> id: digitItem<br /> width: size<br /> height: size
+
Rectangle {
 +
id: digitItem
 +
width: size
 +
height: size
  
 
clip: true
 
clip: true
  
gradient: Gradient {<br /> GradientStop {<br /> position: 0.0<br /> color: &quot;black&amp;quot;<br /> }
+
gradient: Gradient {
 +
GradientStop {
 +
position: 0.0
 +
color: "black"
 +
}
  
GradientStop {<br /> position: 0.5<br /> color: &quot;#222222&amp;quot;<br /> }
+
GradientStop {
 +
position: 0.5
 +
color: "#222222"
 +
}
  
GradientStop {<br /> position: 1.0<br /> color: &quot;black&amp;quot;<br /> }<br /> }
+
GradientStop {
 +
position: 1.0
 +
color: "black"
 +
}
 +
}
  
border.color: &quot;black&amp;quot;<br /> border.width: 1
+
border.color: "black"
 +
border.width: 1
  
property int digit: 0<br /> property int size: 20
+
property int digit: 0
 +
property int size: 20
  
 
onDigitChanged: { digitPath.currentIndex = digit; }
 
onDigitChanged: { digitPath.currentIndex = digit; }
  
PathView {<br /> id: digitPath
+
PathView {
 +
id: digitPath
  
width: digitItem.size<br /> height: digitItem.size * 10
+
width: digitItem.size
 +
height: digitItem.size * 10
  
 
interactive: false
 
interactive: false
Line 43: Line 66:
 
model: [ 0, 1, 2, 3, 4, 5, 6, 7, 8, 9 ]
 
model: [ 0, 1, 2, 3, 4, 5, 6, 7, 8, 9 ]
  
delegate: Text {<br /> width: digitItem.size<br /> height: digitItem.size
+
delegate: Text {
 +
width: digitItem.size
 +
height: digitItem.size
  
 
text: modelData;
 
text: modelData;
  
color: &quot;white&amp;quot;;
+
color: "white";
  
horizontalAlignment: Text.AlignHCenter;<br /> verticalAlignment: Text.AlignVCenter;
+
horizontalAlignment: Text.AlignHCenter;
 +
verticalAlignment: Text.AlignVCenter;
  
font.pointSize: digitItem.size-4;<br /> }
+
font.pointSize: digitItem.size-4;
 +
}
  
preferredHighlightBegin: 0.5<br /> preferredHighlightEnd: 0.5
+
preferredHighlightBegin: 0.5
 +
preferredHighlightEnd: 0.5
  
path: Path {<br /> startX: digitPath.width / 2<br /> startY: 0
+
path: Path {
 +
startX: digitPath.width / 2
 +
startY: 0
  
PathLine { x: digitPath.width / 2; y: digitPath.height }<br /> }<br /> }<br />}<br /></code>
+
PathLine { x: digitPath.width / 2; y: digitPath.height }
 +
}
 +
}
 +
}
 +
</code>
  
 
Компонентът е един правоъгълник, в който центрираме ''PathView'' и включваме клипирането, за да виждаме само текущата цифра.
 
Компонентът е един правоъгълник, в който центрираме ''PathView'' и включваме клипирането, за да виждаме само текущата цифра.
Line 63: Line 97:
 
След това създавеме самия компонент за скролиращите се цифри:
 
След това създавеме самия компонент за скролиращите се цифри:
  
ScrollingDigits.qml<br /><code><br />import QtQuick 1.1
+
ScrollingDigits.qml
 +
<code>
 +
import QtQuick 1.1
  
Row {<br /> id: scrollingDigits
+
Row {
 +
id: scrollingDigits
  
property int number: 0<br /> property int positions: 5
+
property int number: 0
 +
property int positions: 5
  
Repeater {<br /> id: rep
+
Repeater {
 +
id: rep
  
 
model: scrollingDigits.positions
 
model: scrollingDigits.positions
  
Digit {<br /> }<br /> }
+
Digit {
 +
}
 +
}
  
 
onNumberChanged: {
 
onNumberChanged: {
Line 79: Line 120:
 
var tmp = number
 
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 /></code>
+
for( var i = 0; i < positions; ++i ) {
 +
rep.itemAt( positions - i - 1).digit = tmp % 10
 +
tmp = Math.floor( tmp / 10 )
 +
}
 +
}
 +
}
 +
</code>
  
 
Добавяме две нови свойства към ''Row'' елемента - '''number''' и '''positions''' . '''number''' съдържа числото, което искате да покажете, а '''position''' в колко позиции да се изписва.
 
Добавяме две нови свойства към ''Row'' елемента - '''number''' и '''positions''' . '''number''' съдържа числото, което искате да покажете, а '''position''' в колко позиции да се изписва.
Line 87: Line 134:
 
main.qml
 
main.qml
  
<code><br />import QtQuick 1.1
+
<code>
 +
import QtQuick 1.1
  
Rectangle<br />{<br /> width: 400<br /> height: 400
+
Rectangle
 +
{
 +
width: 400
 +
height: 400
  
color: &quot;gray&amp;quot;
+
color: "gray"
  
ScrollingDigits {<br /> anchors.centerIn: parent
+
ScrollingDigits {
 +
anchors.centerIn: parent
  
 
positions: 4
 
positions: 4
  
NumberAnimation on number {<br /> from: 15; to: 100<br /> duration: 50000<br /> }<br /> }<br />}
+
NumberAnimation on number {
 +
from: 15; to: 100
 +
duration: 50000
 +
}
 +
}
 +
}

Revision as of 12:51, 25 February 2015


Български 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
}
}

}