Simple QML Progress Bar/bg: Difference between revisions

From Qt Wiki
Jump to navigation Jump to search
No edit summary
 
No edit summary
Line 1: Line 1:
'''Български''' [[Simple QML Progress Bar|English]]
'''Български''' [[Simple_QML_Progress_Bar|English]]


=Прост прогрес бар=
[[Category:Snippets]]<br />[[Category:HowTo]]<br />[[Category:Developing_with_Qt::Qt Quick]]<br />[[Category:Developing_with_Qt::Qt Quick::QML]]


Този много прост <span class="caps">QML</span> прогрес бар бе вдъхновен от примера, който идва с Qt. Направен е така, че да е много опростен и лек и да е подходящ дори за много малки размери. Ето така изглежда по подразбиране (със зеленият цвят на Qt <span class="smiley">;-)</span> )
= Прост прогрес бар =


[[Image:20110430152206-b395a64a.png|Simple progress bar]]
Този много прост QML прогрес бар бе вдъхновен от примера, който идва с Qt. Направен е така, че да е много опростен и лек и да е подходящ дори за много малки размери. Ето така изглежда по подразбиране (със зеленият цвят на Qt ;<s>) )
<br />[[Image:http://gallery.theharmers.co.uk/upload/2011/04/30/20110430152206-b395a64a.png|Simple progress bar]]
<br />Този прогрес бар се използва заедно с &quot;BusyIndicator&amp;quot;:http://developer.qt.nokia.com/wiki/Busy_Indicator_for_QML в QML компонента '''ProgressSpinner''', за да се получи приятен елемент, който може да показва активността и прогреса на дълги операции.
<br />Реализация (SimpleProgressBar.qml):<br /><code><br />import QtQuick 1.0
<br />Item {<br /> id: progressbar
<br /> property int minimum: 0<br /> property int maximum: 100<br /> property int value: 0<br /> property color color: &quot;#77B753&amp;quot;
<br /> width: 250; height: 23<br /> clip: true
<br /> Rectangle {<br /> id: border<br /> anchors.fill: parent<br /> anchors.bottomMargin: 1<br /> anchors.rightMargin: 1<br /> color: &quot;transparent&amp;quot;<br /> border.width: 1<br /> border.color: parent.color<br /> }
<br /> Rectangle {<br /> id: highlight<br /> property int widthDest: ( ( progressbar.width * ( value</s> minimum ) ) / ( maximum - minimum ) - 4 )<br /> width: highlight.widthDest


Този прогрес бар се използва заедно с [http://developer.qt.nokia.com/wiki/Busy_Indicator_for_QML BusyIndicator] ''[developer.qt.nokia.com]'' в <span class="caps">QML</span> компонента '''ProgressSpinner''', за да се получи приятен елемент, който може да показва активността и прогреса на дълги операции.
Behavior on width {<br /> SmoothedAnimation {<br /> velocity: 1200<br /> }<br /> }


Реализация (SimpleProgressBar.qml):<br />
anchors {<br /> left: parent.left<br /> top: parent.top<br /> bottom: parent.bottom<br /> margins: 2<br /> }<br /> color: parent.color<br /> }<br />}<br /></code>


Употреба:
Употреба:


===Categories:===
<code><br />import QtQuick 1.0


* [[:Category:Developing with Qt|Developing_with_Qt]]
Rectangle {<br /> id: root<br /> width: 640<br /> height: 360
** [[:Category:Developing with Qt::Qt-Quick|Qt Quick]]
* [[:Category:Developing with Qt::Qt-Quick::QML|QML]]


* [[:Category:HowTo|HowTo]]
SimpleProgressBar {<br /> id: progress<br /> anchors.centerIn: progressSpinner<br /> width: 100<br /> height: 12<br /> color: progressSpinner.color<br /> value: 35<br /> }<br />}
* [[:Category:snippets|snippets]]

Revision as of 06:22, 24 February 2015

Български English


Прост прогрес бар

Този много прост QML прогрес бар бе вдъхновен от примера, който идва с Qt. Направен е така, че да е много опростен и лек и да е подходящ дори за много малки размери. Ето така изглежда по подразбиране (със зеленият цвят на Qt ;) )
Simple progress bar
Този прогрес бар се използва заедно с "BusyIndicator&quot;:http://developer.qt.nokia.com/wiki/Busy_Indicator_for_QML в QML компонента ProgressSpinner, за да се получи приятен елемент, който може да показва активността и прогреса на дълги операции.


Реализация (SimpleProgressBar.qml):

<br />import QtQuick 1.0
<br />Item {<br /> id: progressbar
<br /> property int minimum: 0<br /> property int maximum: 100<br /> property int value: 0<br /> property color color: &quot;#77B753&amp;quot;
<br /> width: 250; height: 23<br /> clip: true
<br /> Rectangle {<br /> id: border<br /> anchors.fill: parent<br /> anchors.bottomMargin: 1<br /> anchors.rightMargin: 1<br /> color: &quot;transparent&amp;quot;<br /> border.width: 1<br /> border.color: parent.color<br /> }
<br /> Rectangle {<br /> id: highlight<br /> property int widthDest: ( ( progressbar.width * ( value</s> minimum ) ) / ( maximum - minimum ) - 4 )<br /> width: highlight.widthDest

Behavior on width {<br /> SmoothedAnimation {<br /> velocity: 1200<br /> }<br /> }

anchors {<br /> left: parent.left<br /> top: parent.top<br /> bottom: parent.bottom<br /> margins: 2<br /> }<br /> color: parent.color<br /> }<br />}<br />

Употреба:


import QtQuick 1.0

Rectangle {
id: root
width: 640
height: 360

SimpleProgressBar {
id: progress
anchors.centerIn: progressSpinner
width: 100
height: 12
color: progressSpinner.color
value: 35
}
}

Retrieved from "https://wiki.qt.io/index.php?title=Simple_QML_Progress_Bar/bg&oldid=3120"