Simple QML Progress Bar: Difference between revisions

From Qt Wiki
Jump to navigation Jump to search
No edit summary
 
(Sub-categorize)
 
(6 intermediate revisions by 4 users not shown)
Line 1: Line 1:
'''English''' [[Simple QML Progress Bar Bulgarian|Български]]
{{LangSwitch}}
[[Category:Snippets::QML]]
[[Category:HowTo]]
[[Category:Developing with Qt::Qt Quick::QML]]


=Simple Progress Bar=
This very simple QML progress bar takes some inspiration from 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 ;-) )


This very simple <span class="caps">QML</span> 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 <span class="smiley">;-)</span> )
http://gallery.theharmers.co.uk/upload/2011/04/30/20110430152206-b395a64a.png


[[Image:20110430152206-b395a64a.png|Simple progress bar]]
This progress bar is used along with the [[Busy-Indicator-for-QML | BusyIndicator]] in the ProgressSpinner QML component to produce a nice QML component that can show activity and progress for long operations.


This progress bar is used along with the [http://developer.qt.nokia.com/wiki/Busy_Indicator_for_QML BusyIndicator] ''[developer.qt.nokia.com]'' in the ProgressSpinner <span class="caps">QML</span> component to produce a nice <span class="caps">QML</span> component that can show activity and progress for long operations.
Implementation (SimpleProgressBar.qml):
<code>
import QtQuick 1.0


Implementation (SimpleProgressBar.qml):<br />
Item {
id: progressbar
 
property int minimum: 0
property int maximum: 100
property int value: 0
property color color: "#77B753"
 
width: 250; height: 23
clip: true
 
Rectangle {
id: border
anchors.fill: parent
anchors.bottomMargin: 1
anchors.rightMargin: 1
color: "transparent"
border.width: 1
border.color: parent.color
}
 
Rectangle {
id: highlight
property int widthDest: ( ( progressbar.width * ( value- minimum ) ) / ( maximum - minimum ) - 4 )
width: highlight.widthDest
 
Behavior on width {
SmoothedAnimation {
velocity: 1200
}
}
 
anchors {
left: parent.left
top: parent.top
bottom: parent.bottom
margins: 2
}
color: parent.color
}
}
</code>


Usage:
Usage:


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


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


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

Latest revision as of 13:12, 28 November 2016

En Ar Bg De El Es Fa Fi Fr Hi Hu It Ja Kn Ko Ms Nl Pl Pt Ru Sq Th Tr Uk Zh

This very simple QML progress bar takes some inspiration from 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 ;-) )

20110430152206-b395a64a.png

This progress bar is used along with the BusyIndicator in the ProgressSpinner QML component to produce a nice QML component that can show activity and progress for long operations.

Implementation (SimpleProgressBar.qml):

import QtQuick 1.0

Item {
 id: progressbar

 property int minimum: 0
 property int maximum: 100
 property int value: 0
 property color color: "#77B753"

 width: 250; height: 23
 clip: true

 Rectangle {
 id: border
 anchors.fill: parent
 anchors.bottomMargin: 1
 anchors.rightMargin: 1
 color: "transparent"
 border.width: 1
 border.color: parent.color
 }

 Rectangle {
 id: highlight
 property int widthDest: ( ( progressbar.width * ( value- minimum ) ) / ( maximum - minimum ) - 4 )
 width: highlight.widthDest

Behavior on width {
 SmoothedAnimation {
 velocity: 1200
 }
 }

anchors {
 left: parent.left
 top: parent.top
 bottom: parent.bottom
 margins: 2
 }
 color: parent.color
 }
}

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
 }
}