Simple QML Progress Bar: Difference between revisions
Jump to navigation
Jump to search
No edit summary |
No edit summary |
||
| Line 1: | Line 1: | ||
'''English''' [[ | '''English''' [[Simple_QML_Progress_Bar_Bulgarian|Български]] | ||
[[Category:Snippets]]<br />[[Category:HowTo]]<br />[[Category:Developing_with_Qt::Qt Quick]]<br />[[Category:Developing_with_Qt::Qt Quick::QML]] | |||
= Simple Progress Bar = | |||
[[Image:20110430152206-b395a64a.png|Simple progress bar]] | This very simple QML progress bar takes some inspiration form the progress bars example that ships with Qt. I have modified it to be a very plain and lightweight progress bar that is suitable for use even at very small sizes. This is what it looks like by default (with the Qt green colour ;<s>) ) | ||
<br />[[Image:http://gallery.theharmers.co.uk/upload/2011/04/30/20110430152206-b395a64a.png|Simple progress bar]] | |||
<br />This progress bar is used along with the "BusyIndicator&quot;:http://developer.qt.nokia.com/wiki/Busy_Indicator_for_QML in the ProgressSpinner QML component to produce a nice QML component that can show activity and progress for long operations. | |||
<br />Implementation (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: "#77B753&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: "transparent&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 /></code> | |||
Usage: | Usage: | ||
<code><br />import QtQuick 1.0 | |||
Rectangle {<br /> id: root<br /> width: 640<br /> height: 360 | |||
SimpleProgressBar {<br /> id: progress<br /> anchors.centerIn: progressSpinner<br /> width: 100<br /> height: 12<br /> color: progressSpinner.color<br /> value: 35<br /> }<br />} | |||
Revision as of 09:04, 24 February 2015
English Български
Simple Progress Bar
This very simple QML progress bar takes some inspiration form the progress bars example that ships with Qt. I have modified it to be a very plain and lightweight progress bar that is suitable for use even at very small sizes. This is what it looks like by default (with the Qt green colour ;) )
Simple progress bar
This progress bar is used along with the "BusyIndicator":http://developer.qt.nokia.com/wiki/Busy_Indicator_for_QML in the ProgressSpinner QML component to produce a nice QML component that can show activity and progress for long operations.
Implementation (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&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: "transparent&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 />
Usage:
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
}
}