QML Scrolling Digits/bg: Difference between revisions

From Qt Wiki
Jump to navigation Jump to search
No edit summary
 
No edit summary
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
}
}

}