Simple QML Progress Bar/bg: Difference between revisions
No edit summary |
No edit summary |
||
Line 5: | Line 5: | ||
= Прост прогрес бар = | = Прост прогрес бар = | ||
Този много прост QML прогрес бар бе вдъхновен от примера, който идва с Qt. Направен е така, че да е много опростен и лек и да е подходящ дори за много малки размери. Ето така изглежда по подразбиране (със зеленият цвят на Qt ; | Този много прост QML прогрес бар бе вдъхновен от примера, който идва с Qt. Направен е така, че да е много опростен и лек и да е подходящ дори за много малки размери. Ето така изглежда по подразбиране (със зеленият цвят на Qt ;-) ) | ||
<br />[[Image:http://gallery.theharmers.co.uk/upload/2011/04/30/20110430152206-b395a64a.png|Simple progress bar]] | <br />[[Image:http://gallery.theharmers.co.uk/upload/2011/04/30/20110430152206-b395a64a.png|Simple progress bar]] | ||
<br />Този прогрес бар се използва заедно с | <br />Този прогрес бар се използва заедно с "BusyIndicator":http://developer.qt.nokia.com/wiki/Busy_Indicator_for_QML в QML компонента '''ProgressSpinner''', за да се получи приятен елемент, който може да показва активността и прогреса на дълги операции. | ||
<br />Реализация (SimpleProgressBar.qml):<br /><code><br />import QtQuick 1.0 | <br />Реализация (SimpleProgressBar.qml):<br /><code><br />import QtQuick 1.0 | ||
<br />Item {<br /> id: progressbar | <br />Item {<br /> id: progressbar | ||
<br /> property int minimum: 0<br /> property int maximum: 100<br /> property int value: 0<br /> property color color: | <br /> property int minimum: 0<br /> property int maximum: 100<br /> property int value: 0<br /> property color color: "#77B753" | ||
<br /> width: 250; height: 23<br /> clip: true | <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: | <br /> Rectangle {<br /> id: border<br /> anchors.fill: parent<br /> anchors.bottomMargin: 1<br /> anchors.rightMargin: 1<br /> color: "transparent"<br /> border.width: 1<br /> border.color: parent.color<br /> } | ||
<br /> Rectangle {<br /> id: highlight<br /> property int widthDest: ( ( progressbar.width * ( value | <br /> Rectangle {<br /> id: highlight<br /> property int widthDest: ( ( progressbar.width * ( value- minimum ) ) / ( maximum - minimum ) - 4 )<br /> width: highlight.widthDest | ||
Behavior on width {<br /> SmoothedAnimation {<br /> velocity: 1200<br /> }<br /> } | Behavior on width {<br /> SmoothedAnimation {<br /> velocity: 1200<br /> }<br /> } |
Revision as of 06:39, 25 February 2015
Български English
Прост прогрес бар
Този много прост QML прогрес бар бе вдъхновен от примера, който идва с Qt. Направен е така, че да е много опростен и лек и да е подходящ дори за много малки размери. Ето така изглежда по подразбиране (със зеленият цвят на Qt ;-) )
Simple progress bar
Този прогрес бар се използва заедно с "BusyIndicator":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: "#77B753"
<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: "transparent"<br /> border.width: 1<br /> border.color: parent.color<br /> }
<br /> Rectangle {<br /> id: highlight<br /> property int widthDest: ( ( progressbar.width * ( value- 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
}
}