Simple QML Progress Bar/bg

From Qt Wiki
Jump to navigation Jump to search
The printable version is no longer supported and may have rendering errors. Please update your browser bookmarks and please use the default browser print function instead.

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