Qt wiki will be updated on October 12th 2023 starting at 11:30 AM (EEST) and the maintenance will last around 2-3 hours. During the maintenance the site will be unavailable.
Simple QML Progress Bar: Difference between revisions
Jump to navigation
Jump to search
AutoSpider (talk | contribs) (Convert ExpressionEngine links) |
(Sub-categorize) |
||
| (2 intermediate revisions by 2 users not shown) | |||
| Line 1: | Line 1: | ||
{{ | {{LangSwitch}} | ||
[[Category:Snippets::QML]] | |||
[[Category:Snippets]] | |||
[[Category:HowTo]] | [[Category:HowTo]] | ||
[[Category: | [[Category:Developing with Qt::Qt Quick::QML]] | ||
This very simple QML progress bar takes some inspiration | 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 ;-) ) | ||
http://gallery.theharmers.co.uk/upload/2011/04/30/20110430152206-b395a64a.png | |||
This progress bar is used along with the [ | 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. | ||
Implementation (SimpleProgressBar.qml): | Implementation (SimpleProgressBar.qml): | ||
| Line 82: | Line 76: | ||
} | } | ||
} | } | ||
</code> | |||
Latest revision as of 13:12, 28 November 2016
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 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
}
}