Busy Indicator for QML: Difference between revisions

From Qt Wiki
Jump to navigation Jump to search
No edit summary
 
(Sub-categorize)
 
(4 intermediate revisions by 3 users not shown)
Line 1: Line 1:
=Busy Indicator=
{{LangSwitch}}
[[Category:Snippets::QML]]
[[Category:HowTo]]
[[Category:Developing with Qt::Qt Quick::QML]]
QtQuick.Controls 1.3 come with the ''BusyIndicator''.
It is a simple and ready-to-use component.
Here is a short example for how to use it:


==Introduction==
<code>
import QtQuick 2.4
import QtQuick.Controls 1.3
import QtQuick.Window 2.2


Certain graphical assets may take a while to load or you may wish to show that some other processing is going on. This custom BusyIndicator shows one way in which visual feedback can be provided. This busy indicator has been implemented as a custom QDeclarativeItem in C++ since it uses a conical gradient which it is not possible to represent in an <span class="caps">SVG</span> (which only have support for linear and radial gradients). We do take care to minimise the amount of expensive imperative drawing operations. My inspiration for this design comes from StarCraft 2 <span class="smiley">;-)</span>
ApplicationWindow {
    title: qsTr("Hello World")
    width: 640
    height: 480
    visible: true


==Implementation==
    BusyIndicator {
      id: busyIndication
      anchors.centerIn: parent
      // 'running' defaults to 'true'
    }


First, here is the class declaration:
    Button {
 
        anchors.horizontalCenter: parent.horizontalCenter
This is quite a simple sub-class of QDeclarativeItem with only a handful of properties for setting the inner and outer radii of the busy indicator’s ring as a fraction of the item’s size. In this case the item’s size is defined to be min( width, height ) so as to preserve the 1:1 aspect ratio of the ring.
        anchors.bottom: parent.bottom
 
        text: busyIndication.running ? "Stop Busy Indicator" : "Start Busy Indicator"
Now for the implementation:
        checkable: true
 
        checked: busyIndication.running
In the constructor we set up a default size of 100×100 pixels for the indicator and call the updateSpinner() function. This function is also called whenever one of the affecting properties changes. These are:
        onClicked: busyIndication.running = !busyIndication.running
 
    }
* Height
}
* Width
</code>
* Inner radius
* Outer radius
* Background color
* Foreground color
 
The implementation of the updateSpinner() function only calculates a new QString value which is later used in paint() as a key in the global QPixmapCache. In the paint() function we check to see if the QPixmapCache already contains a matching pixmap or not. If it does we paint it. If it does not we first generate it, store it in the cache and then paint it.
 
This approach minimises the amount of expensive painting calls and key constructions.
 
==Usage==
 
Before we can use our custom item in any <span class="caps">QML</span> scene we need to expose it to the <span class="caps">QML</span> world. We do this with something along these lines:
 
Then in your <span class="caps">QML</span> scene you need to instruct the <span class="caps">QML</span> backend to import this collection (of 1) components with:
 
p. You are now ready to roll.
 
==Independent Usage==
 
The above should provide you with a nicely spinning busy indicator. Obviously the size and colors can be varied using the properties we declared in the header file.
 
==Compound Usage Within Another Component==
 
It is also easy to include the BusyIndicator into compound components. One example might be for slow to load images:
 
This will show a nice spinning busy indicator until the image is loaded. Of course you can expose more of the properties to the outside world if you like – this is just a simple example after all.
 
Another example using this Busy Indicator component along with a small progress bar in the center of the spinning ring to show loading progress for e.g. is shown in this snippet [developer.qt.nokia.com].
 
==Independent Usage as Widget==
 
This implementation of a busy indicator can also be used without <span class="caps">QML</span>. It can be added as widget through QGraphicsView [developer.qt.nokia.com] and QGraphicsScene [developer.qt.nokia.com] to a layout [developer.qt.nokia.com] and animated with QTimeLine [developer.qt.nokia.com] as shown at the following example. It is important to note that the viewport must be set in order to display the busy indicator.
 
Example<br />

Latest revision as of 12:30, 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

QtQuick.Controls 1.3 come with the BusyIndicator. It is a simple and ready-to-use component. Here is a short example for how to use it: 

import QtQuick 2.4
import QtQuick.Controls 1.3
import QtQuick.Window 2.2

ApplicationWindow {
    title: qsTr("Hello World")
    width: 640
    height: 480
    visible: true

    BusyIndicator {
       id: busyIndication
       anchors.centerIn: parent
       // 'running' defaults to 'true'
    }

    Button {
        anchors.horizontalCenter: parent.horizontalCenter
        anchors.bottom: parent.bottom
        text: busyIndication.running ? "Stop Busy Indicator" : "Start Busy Indicator"
        checkable: true
        checked: busyIndication.running
        onClicked: busyIndication.running = !busyIndication.running
    }
}
Retrieved from "https://wiki.qt.io/index.php?title=Busy_Indicator_for_QML&oldid=29298"