Types in this example are augmented with meta-data for accessiblity systems.
For example, the button identifies itself and its functionality to the accessibility system:
- \snippet quick/accessibility/content/Button.qml button
+ \snippet accessibility/content/Button.qml button
As do Text types inside the example:
- \snippet quick/accessibility/accessibility.qml text
+ \snippet accessibility/accessibility.qml text
*/
a small QML file emphasizing a particular type or feature.
ColorAnimation demonstrates using a color animation to fade a sky from day to night.
- \snippet quick/animation/basics/color-animation.qml 0
+ \snippet animation/basics/color-animation.qml 0
PropertyAnimation demonstrates using a number animation to bounce a circle up and down.
- \snippet quick/animation/basics/property-animation.qml 0
+ \snippet animation/basics/property-animation.qml 0
Behaviors demonstrates using behaviors to animate moving a rectangle to whereever you click.
- \snippet quick/animation/behaviors/behavior-example.qml 0
+ \snippet animation/behaviors/behavior-example.qml 0
Wiggly Text demonstrates using more complex behaviors to animate and wiggle some text around as you drag it.
It does this by assigning a complex binding to each letter:
- \snippet quick/animation/behaviors/wigglytext.qml 0
+ \snippet animation/behaviors/wigglytext.qml 0
Then, it uses behaviors to animate the movement on each letter:
- \snippet quick/animation/behaviors/wigglytext.qml 1
+ \snippet animation/behaviors/wigglytext.qml 1
Tv Tennis demonstrates using more complex behaviors to get paddles following a ball for an infinite game.
Again a binding which depends on other values is applied to the position and a behavior provided the animation.
- \snippet quick/animation/behaviors/tvtennis.qml 0
+ \snippet animation/behaviors/tvtennis.qml 0
Easing Curves shows off all the easing curves available in Qt Quick animations.
States demonstrates how the properties of an item can vary between states.
It defines several states:
- \snippet quick/animation/states/states.qml 0
+ \snippet animation/states/states.qml 0
Note that there is also the implicit 'base state' from properties set directly on objects.
Transitions takes the States example and animates the property changes by setting transitions:
- \snippet quick/animation/states/transitions.qml 0
+ \snippet animation/states/transitions.qml 0
PathAnimation animates an image along a beizer curve using a PathAnimation.
- \snippet quick/animation/pathanimation/pathanimation.qml 0
+ \snippet animation/pathanimation/pathanimation.qml 0
PathInterpolator animates an image along the same beizer curve, using a PathInterpolator instead.
- \snippet quick/animation/pathinterpolator/pathinterpolator.qml 0
+ \snippet animation/pathinterpolator/pathinterpolator.qml 0
*/
a small QML file emphasizing a particular type or feature.
Red heart demonstrates using a bezierCurve API to stroke and fill a red heart.
- \snippet quick/canvas/bezierCurve/bezierCurve.qml 0
+ \snippet canvas/bezierCurve/bezierCurve.qml 0
Talk bubble demonstrates using a quadraticCurveTo API to stroke and fill a customized talk bubble:
- \snippet quick/canvas/quadraticCurveTo/quadraticCurveTo.qml 0
+ \snippet canvas/quadraticCurveTo/quadraticCurveTo.qml 0
This example also demonstrates the fillText API:
- \snippet quick/canvas/quadraticCurveTo/quadraticCurveTo.qml 1
+ \snippet canvas/quadraticCurveTo/quadraticCurveTo.qml 1
Squircle demonstrates using a collection of simple moveTo/lineTo path APIs to draw a smooth squircle.
Smile face demonstrates using several complex path APIs to draw an fill a smile face.
Clip demonstrates using clip API to clip a given image.
- \snippet quick/canvas/clip/clip.qml 0
+ \snippet canvas/clip/clip.qml 0
Tiger demonstrates using SVG path API to draw a tiger with a collection of SVG path strings.
- \snippet quick/canvas/tiger/tiger.qml 0
+ \snippet canvas/tiger/tiger.qml 0
*/
It has a DragTile component which uses a MouseArea to move an item when dragged:
- \snippet quick/draganddrop/tiles/DragTile.qml 0
- \snippet quick/draganddrop/tiles/DragTile.qml 1
+ \snippet draganddrop/tiles/DragTile.qml 0
+ \snippet draganddrop/tiles/DragTile.qml 1
And a DropTile component which the dragged tiles can be dropped onto:
- \snippet quick/draganddrop/tiles/DropTile.qml 0
+ \snippet draganddrop/tiles/DropTile.qml 0
The keys property of the DropArea will only allow an item with matching key in
it's Drag.keys property to be dropped on it.
It uses a DelegateModel to move a delegate item to the position of another item
it is dragged over.
- \snippet quick/draganddrop/views/gridview.qml 0
- \snippet quick/draganddrop/views/gridview.qml 1
+ \snippet draganddrop/views/gridview.qml 0
+ \snippet draganddrop/views/gridview.qml 1
*/
'Shadows' shows how to create a drop shadow effect for a rectangular item
using a BorderImage:
- \snippet quick/imageelements/content/ShadowRectangle.qml shadow
+ \snippet imageelements/content/ShadowRectangle.qml shadow
'AnimatedSprite' shows how to display a simple animation using an
AnimatedSprite object:
- \snippet quick/imageelements/animatedsprite.qml sprite
+ \snippet imageelements/animatedsprite.qml sprite
The sprite animation will loop 3 times.
'SpriteSequence' demonstrates using a sprite sequence to draw an animated
and interactive bear.
The SpriteSequence defines 5 different sprites. The bear is initially in
a 'still' state:
- \snippet quick/imageelements/spritesequence.qml still
+ \snippet imageelements/spritesequence.qml still
When the scene is clicked, an animation sets the sprite sequence to the
'falling' states and animates the bear's y property.
- \snippet quick/imageelements/spritesequence.qml animation
+ \snippet imageelements/spritesequence.qml animation
At the end of the animation the bear is set back to its initial state.
*/
of that click which are available to QML.
Signals are emitted by the MouseArea when clicks or other discrete operations occur within it
- \snippet quick/mousearea/mousearea.qml clicks
+ \snippet mousearea/mousearea.qml clicks
The MouseArea can also be used to drag items around. By setting the parameters of the drag property,
the target item will be dragged around if the user starts to drag within the MouseArea.
- \snippet quick/mousearea/mousearea.qml drag
+ \snippet mousearea/mousearea.qml drag
*/
is the base class for all QPainter based items in the QML Scene Graph
framework.
- \snippet quick/customitems/painteditem/textballoon.h 0
+ \snippet customitems/painteditem/textballoon.h 0
To implement a QQuickPaintedItem you must implement QQuickPaintedIem's pure
virtual function \l {QQuickPaintedItem::}{paint()} which implements the
We have to be sure to initialize the rightAligned property for a
TextBalloon item.
- \snippet quick/customitems/painteditem/textballoon.cpp 0
+ \snippet customitems/painteditem/textballoon.cpp 0
Then we implement the \c paint() function which is automatically called by
the Scene Graph framework to paint the contents of the item. The function
paints the item in local coordinates.
- \snippet quick/customitems/painteditem/textballoon.cpp 1
+ \snippet customitems/painteditem/textballoon.cpp 1
We start with setting the pen and brush on the item to define the look of
the item. After that we start drawing. Note that the \l {QQuickPaintedItem::}{boundingRect()}
\section2 BalloonView
- \snippet quick/customitems/painteditem/textballoons.qml 0
+ \snippet customitems/painteditem/textballoons.qml 0
The balloonModel contains two types at application start which will be
displayed by the balloonView. The balloonView alernates the TextBalloon
\section2 Controls
- \snippet quick/customitems/painteditem/textballoons.qml 1
+ \snippet customitems/painteditem/textballoons.qml 1
The controls part of the UI contains a rectangle with a MouseArea which
changes color when the mouse hovers over it. This control 'button' adds
Each example is a small QML file emphasizing a particular type or feature.
Age demonstrates using an Age affector to prematurely end the lives of particles.
- \snippet quick/particles/affectors/content/age.qml 0
+ \snippet particles/affectors/content/age.qml 0
As you move the affector around the screen, the particles inside it
(which haven't already been affected) jump to a period near the end
the end of their life instantly.
Attractor demonstrates using an Attractor affector to simulate a black hole
- \snippet quick/particles/affectors/content/attractor.qml 0
+ \snippet particles/affectors/content/attractor.qml 0
All particles in the scene, including the rocket ship's exhaust and pellets, are pulled
towards the black hole. This effect is stronger closer to the black hole, so the
Custom Affector manipulates the properties of the particles directly in javascript.
One Affector is used to make the leaves rock back and forth as they fall, looking more
leaf-like than just spinning in circles:
- \snippet quick/particles/affectors/content/customaffector.qml 0
+ \snippet particles/affectors/content/customaffector.qml 0
Another is used to provide a slightly varying friction to the leaves as they 'land',
to look more natural:
- \snippet quick/particles/affectors/content/customaffector.qml 1
+ \snippet particles/affectors/content/customaffector.qml 1
Friction is similar to the falling leaves in the custom affector, except that it uses a
flat friction the whole way down instead of custom affectors.
- \snippet quick/particles/affectors/content/friction.qml 0
+ \snippet particles/affectors/content/friction.qml 0
Gravity is a convenience affector for applying a constant acceleration to particles inside it
- \snippet quick/particles/affectors/content/gravity.qml 0
+ \snippet particles/affectors/content/gravity.qml 0
GroupGoal sets up two particle groups for flaming and non-flaming balls, and gives you various
ways to transition between them.
- \snippet quick/particles/affectors/content/groupgoal.qml unlit
+ \snippet particles/affectors/content/groupgoal.qml unlit
The non-flaming balls have a one in a hundred chance of lighting on their own each second, but they also
have a GroupGoal set on the whole group. This affector affects all particles of the unlit group, when colliding
with particles in the lit group, and cause them to move to the lighting group.
- \snippet quick/particles/affectors/content/groupgoal.qml lighting
+ \snippet particles/affectors/content/groupgoal.qml lighting
lighting is an intermediate group so that the glow builds up and the transition is less jarring. So it automatically
moves into the lit group after 100ms.
- \snippet quick/particles/affectors/content/groupgoal.qml lit
+ \snippet particles/affectors/content/groupgoal.qml lit
The lit group also has TrailEmitters on it for additional fire and smoke, but does not transition anywhere.
There are two more GroupGoal objects that allow particles in the unlit group to transition to the lighting group
(and then to the lit group).
- \snippet quick/particles/affectors/content/groupgoal.qml groupgoal-pilot
+ \snippet particles/affectors/content/groupgoal.qml groupgoal-pilot
The first is just an area bound to the location of an image of a pilot flame. When unlit balls pass through the flame,
they go straight to lit because the pilot flame is so hot.
- \snippet quick/particles/affectors/content/groupgoal.qml groupgoal-ma
+ \snippet particles/affectors/content/groupgoal.qml groupgoal-ma
The second is bound to the location of the last pointer interaction, so that touching or clicking on unlit balls (which
is hard due to their constant movement) causes them to move to the lighting group.
Move shows some simple effects you can get by altering trajectory midway.
The red particles have an affector that affects their position, jumping them forwards by 120px.
- \snippet quick/particles/affectors/content/move.qml A
+ \snippet particles/affectors/content/move.qml A
The green particles have an affector that affects their velocity, but with some angle variation. By adding some random direction
velocity to their existing forwards velocity, they begin to spray off in a cone.
- \snippet quick/particles/affectors/content/move.qml B
+ \snippet particles/affectors/content/move.qml B
The blue particles have an affector that affects their acceleration, and because it sets relative to false this resets the acceleration instead of
adding to it. Once the blue particles reach the affector, their horizontal velocity stops increasing as their vertical velocity decreases.
- \snippet quick/particles/affectors/content/move.qml C
+ \snippet particles/affectors/content/move.qml C
SpriteGoal has an affector which interacts with the sprite engine of particles, if they are being drawn as sprites by ImageParticle.
- \snippet quick/particles/affectors/content/spritegoal.qml 0
+ \snippet particles/affectors/content/spritegoal.qml 0
The SpriteGoal follows the image of the rocket ship on screen, and when it interacts with particles drawn by ImageParticle as sprites,
it instructs them to move immediately to the "explode" state, which in this case is the animation of the asteroid breaking into many pieces.
Turbulence has a flame with smoke, and both sets of particles being affected by a Turbulence affector. This gives a faint wind effect.
- \snippet quick/particles/affectors/content/turbulence.qml 0
+ \snippet particles/affectors/content/turbulence.qml 0
To make the wind change direction, subsitute a black and white noise image in the noiseSource parameter (it currently uses a default noise source).
Wander uses a Wander affector to add some horizontal drift to snowflakes as they fall down.
- \snippet quick/particles/affectors/content/wander.qml 0
+ \snippet particles/affectors/content/wander.qml 0
There are different movements given by applying the Wander to different attributes of the trajectory, so the example makes it easy to play around and see the difference.
*/
Blur Particles adds a blur effect to the particles, which increases over the particle's life time.
It uses a custom vertex shader:
- \snippet quick/particles/customparticle/content/blurparticles.qml vertex
+ \snippet particles/customparticle/content/blurparticles.qml vertex
to propagate life time simulation to a custom fragement shader:
- \snippet quick/particles/customparticle/content/blurparticles.qml fragment
+ \snippet particles/customparticle/content/blurparticles.qml fragment
which has access to both the normal image sampler and a blurred sampler, the image plus a ShaderEffect.
Fragment Shader just uses the particle system as a vertex delivery system.
- \snippet quick/particles/customparticle/content/fragmentshader.qml 0
+ \snippet particles/customparticle/content/fragmentshader.qml 0
Image Colors uses CustomParticle to assign colors to particles based on their location in a picture.
The vertex shader,
- \snippet quick/particles/customparticle/content/imagecolors.qml vertex
+ \snippet particles/customparticle/content/imagecolors.qml vertex
passes along the starting position for each vertex to the fragment shader,
- \snippet quick/particles/customparticle/content/imagecolors.qml fragment
+ \snippet particles/customparticle/content/imagecolors.qml fragment
which uses it to determine the color for that particle.
*/
Each example is a small QML file emphasizing a particular type or feature.
Velocity from motion gives the effect of strong particle motion through primarily moving the emitters:
- \snippet quick/particles/emitters/content/velocityfrommotion.qml 0
+ \snippet particles/emitters/content/velocityfrommotion.qml 0
Burst and pulse calls the burst and pulse methods on two idential emitters.
- \snippet quick/particles/emitters/content/burstandpulse.qml 0
+ \snippet particles/emitters/content/burstandpulse.qml 0
Note how burst takes an argument of number of particles to emit, and pulse takes an argument of number of milliseconds to emit for.
This gives a slightly different behaviour, which is easy to see in this example.
Custom Emitter connects to the emitParticles signal to set arbitrary values on particle data as they're emitted;
- \snippet quick/particles/emitters/content/customemitter.qml 0
+ \snippet particles/emitters/content/customemitter.qml 0
This is used to emit curving particles in six rotating spokes.
Emit mask sets an image mask on the Emitter, to emit out of an arbitrary shape.
- \snippet quick/particles/emitters/content/emitmask.qml 0
+ \snippet particles/emitters/content/emitmask.qml 0
Maximum emitted emits no more than a certain number of particles at a time. This example makes it easy to see what happens when the limit is reached.
Shape and Direction emits particles out of an unfilled Ellipse shape, using a TargetDirection
- \snippet quick/particles/emitters/content/shapeanddirection.qml 0
+ \snippet particles/emitters/content/shapeanddirection.qml 0
This sends the particles towards the center of the ellipse with proportional speed, keeping the ellipse outline as they move to the center.
TrailEmitter uses that type to add smoke particles to trail the fire particles in the scene.
- \snippet quick/particles/emitters/content/customemitter.qml 0
+ \snippet particles/emitters/content/customemitter.qml 0
*/
Each example is a small QML file emphasizing a particular type or feature.
All at once shows off several of the features of ImageParticle at the same time.
- \snippet quick/particles/imageparticle/content/allatonce.qml 0
+ \snippet particles/imageparticle/content/allatonce.qml 0
Colored shows a simple ImageParticle with some color variation.
- \snippet quick/particles/imageparticle/content/colored.qml 0
+ \snippet particles/imageparticle/content/colored.qml 0
Color Table sets the color over life on the particles to provide a fixed rainbow effect.
- \snippet quick/particles/imageparticle/content/colortable.qml 0
+ \snippet particles/imageparticle/content/colortable.qml 0
Deformation spins and squishes a starfish particle.
- \snippet quick/particles/imageparticle/content/deformation.qml spin
- \snippet quick/particles/imageparticle/content/deformation.qml deform
+ \snippet particles/imageparticle/content/deformation.qml spin
+ \snippet particles/imageparticle/content/deformation.qml deform
Rotation demonstrates the autoRotate property, so that particles rotate in the direction that they travel.
Sharing demonstrates what happens when multiple ImageParticles try to render the same particle.
The following ImageParticle renders the particles inside the ListView:
- \snippet quick/particles/imageparticle/content/sharing.qml 0
+ \snippet particles/imageparticle/content/sharing.qml 0
The following ImageParticle is placed inside the list highlight, and renders the particles above the other ImageParticle.
- \snippet quick/particles/imageparticle/content/sharing.qml 1
+ \snippet particles/imageparticle/content/sharing.qml 1
Note that because it sets the color and alpha in this ImageParticle, it renders the particles in a different color.
Since it doesn't specify anything about the rotation, it shares the rotation with the other ImageParticle so that the flowers are rotated the same way in both.
Note that you can undo rotation in another ImageParticle, you just need to explicity set rotationVariation to 0.
Each example is a small QML file emphasizing a particular type or feature.
Dynamic comparison compares using the particle system to getting a similar effect with the following code that dynamically instantiates Image types.
- \snippet quick/particles/system/content/dynamiccomparison.qml fake
+ \snippet particles/system/content/dynamiccomparison.qml fake
Note how the Image objects are not able to be randomly colorized.
Start and Stop simply sets the running and paused states of a ParticleSystem. While the system does not perform any simulation when stopped or paused, a restart restarts the simulation from the beginning, while unpausing resumes the simulation from where it was.
Timed group changes is an example that highlights the ParticleGroup type. While normally referring to groups with a string name is sufficient, additional effects can be
done by setting properties on groups.
The first group has a variable duration on it, but always transitions to the second group.
- \snippet quick/particles/system/content/timedgroupchanges.qml 0
+ \snippet particles/system/content/timedgroupchanges.qml 0
The second group has a TrailEmitter on it, and a fixed duration for emitting into the third group. By placing the TrailEmitter as a direct child of the ParticleGroup, it automatically selects that group to follow.
- \snippet quick/particles/system/content/timedgroupchanges.qml 1
+ \snippet particles/system/content/timedgroupchanges.qml 1
The third group has an Affector as a direct child, which makes the affector automatically target this group. The affector means that as soon as particles enter this group, a burst function can be called on another emitter, using the x,y positions of this particle.
- \snippet quick/particles/system/content/timedgroupchanges.qml 2
+ \snippet particles/system/content/timedgroupchanges.qml 2
If TrailEmitter does not suit your needs for multiple emitters, you can also dynamically create Emitters while still using the same ParticleSystem and image particle
- \snippet quick/particles/system/content/dynamicemitters.qml 0
+ \snippet particles/system/content/dynamicemitters.qml 0
Note that this effect, a flurry of flying rainbow spears, would be better served with TrailEmitter. It is only done with dynamic emitters in this example to show the concept more simply.
Multiple Painters shows how to control paint ordering of individual particles. While the paint ordering of particles within one ImagePainter is not strictly defined, ImageParticle objects follow the normal Z-ordering rules for \l {Qt Quick} items. This example allow you to paint the inside of the particles above the black borders using a pair of ImageParticles each painting different parts of the same logical particle.
It consists of a scene populated with items in a variety of positioners: Column, Row, Grid and Flow.
Each positioner has animations described as Transitions.
- \snippet quick/positioners/positioners-transitions.qml move
+ \snippet positioners/positioners-transitions.qml move
The move transition specifies how items inside a positioner will animate when they are displaced by the appearance or disappearance of other items.
- \snippet quick/positioners/positioners-transitions.qml add
+ \snippet positioners/positioners-transitions.qml add
The add transition specifies how items will appear when they are added to a positioner.
- \snippet quick/positioners/positioners-transitions.qml populate
+ \snippet positioners/positioners-transitions.qml populate
The populate transition specifies how items will appear when their parent positioner is first created.
Attached Properties shows how the Positioner attached property can be used to determine where an item is within a positioner.
- \snippet quick/positioners/positioners-attachedproperties.qml 0
+ \snippet positioners/positioners-attachedproperties.qml 0
*/
with shaders in \l {Qt Quick}.
ShaderEffects typically operate on other types, using a ShaderEffectSource
- \snippet quick/shadereffects/shadereffects.qml source
+ \snippet shadereffects/shadereffects.qml source
In the above snippet, theItem is the id of a complex QML object in the file.
ShaderEffects can use this ShaderEffectSource as a texture in their fragment shader.
- \snippet quick/shadereffects/shadereffects.qml fragment
+ \snippet shadereffects/shadereffects.qml fragment
You can use any custom property on the ShaderEffect in your shader. This makes
animated shader code very easy.
- \snippet quick/shadereffects/shadereffects.qml properties
+ \snippet shadereffects/shadereffects.qml properties
ShaderEffects can also have a custom vertext shader. Setting the mesh property on ShaderEffect
provides more vertices for you to manipulate, enabling many effects.
- \snippet quick/shadereffects/shadereffects.qml vertex
+ \snippet shadereffects/shadereffects.qml vertex
*/
'Hello' shows how to change and animate the letter spacing of a Text type.
It uses a sequential animation to first animate the font.letterSpacing property
from 0 to 50 over 3 seconds and then move the text to a random position on screen:
- \snippet quick/text/fonts/hello.qml letterspacing
+ \snippet text/fonts/hello.qml letterspacing
'Fonts' shows different ways of using fonts with the Text type.
Simply by name, using the font.family property directly:
- \snippet quick/text/fonts/fonts.qml name
+ \snippet text/fonts/fonts.qml name
or using a FontLoader type:
- \snippet quick/text/fonts/fonts.qml fontloader
+ \snippet text/fonts/fonts.qml fontloader
or using a FontLoader and specifying a local font file:
- \snippet quick/text/fonts/fonts.qml fontloaderlocal
+ \snippet text/fonts/fonts.qml fontloaderlocal
or finally using a FontLoader and specifying a remote font file:
- \snippet quick/text/fonts/fonts.qml fontloaderremote
+ \snippet text/fonts/fonts.qml fontloaderremote
'Available Fonts' shows how to use the QML global Qt object and a list view
to display all the fonts available on the system.
The ListView type uses the list of fonts available as its model:
- \snippet quick/text/fonts/availableFonts.qml model
+ \snippet text/fonts/availableFonts.qml model
Inside the delegate, the font family is set with the modelData:
- \snippet quick/text/fonts/availableFonts.qml delegate
+ \snippet text/fonts/availableFonts.qml delegate
'Banner' is a simple example showing how to create a banner using a row of text
types and a NumberAnimation.
'Text Layout' shows how to create a more complex layout for a text item.
This example lays out the text in two columns using the onLineLaidOut handler
that allows you to position and resize each line:
- \snippet quick/text/styledtext-layout.qml layout
+ \snippet text/styledtext-layout.qml layout
*/
Threaded ListModel contains a ListView and a ListModel. The ListModel is updated asynchronusly in another thread, and the results propagate back to the main thread.
A timer requests updates from the worker thread periodically:
- \snippet quick/threading/threadedlistmodel/timedisplay.qml 0
+ \snippet threading/threadedlistmodel/timedisplay.qml 0
Inside the worker thread, the ListModel is synchronized once the data is finished loading:
- \snippet quick/threading/threadedlistmodel/dataloader.js 0
+ \snippet threading/threadedlistmodel/dataloader.js 0
WorkerScript contains an example of using a WorkerScript to offload expensive calculations into another thread. This keeps the UI from being blocked. This example calculates numbers in Pascal's Triangle, and not in a very optimal way, so it will often take several seconds to complete the calculation. By doing this in a WorkerScript in another thread, the UI is not blocked during this time.
When the UI needs another value, a request is sent to the WorkerScript:
- \snippet quick/threading/workerscript/workerscript.qml 0
+ \snippet threading/workerscript/workerscript.qml 0
The workerscript then is free to take a really long time to calculate it:
- \snippet quick/threading/workerscript/workerscript.js 0
+ \snippet threading/workerscript/workerscript.js 0
When it's done, the result returns to the main scene via the WorkerScript type:
- \snippet quick/threading/workerscript/workerscript.qml 1
+ \snippet threading/workerscript/workerscript.qml 1
*/
Multipoint Flames demonstrates distinguishing different fingers in a MultiPointTouchArea, by assigning a different colored flame to each touch point.
The MultipointTouchArea sets up multiple touch points:
- \snippet quick/touchinteraction/multipointtouch/multiflame.qml 0
+ \snippet touchinteraction/multipointtouch/multiflame.qml 0
The flames are then simply bound to the coordiates of the touch point, and whether it is currently pressed, like so:
- \snippet quick/touchinteraction/multipointtouch/multiflame.qml 1
+ \snippet touchinteraction/multipointtouch/multiflame.qml 1
Bear-Whack demonstrates using a MultiPointTouchArea to add multiple finger support to a simple game. The interaction with the game
is done through a SpriteGoal that follows the TouchPoint. The TouchPoints added to the MultiPointTouchArea are a component with all
this logic embedded into it:
- \snippet quick/touchinteraction/multipointtouch/content/AugmentedTouchPoint.qml 0
+ \snippet touchinteraction/multipointtouch/content/AugmentedTouchPoint.qml 0
Flick Resize uses a PinchArea to allow Pinch-to-Resize behavior. This is easily achieved just by listening to the PinchArea signals and responding
to user input.
- \snippet quick/touchinteraction/pincharea/flickresize.qml 0
+ \snippet touchinteraction/pincharea/flickresize.qml 0
Flickable is a simple example demonstrating the Flickable type. The object inside the flickable is very big, but the flickable itself is very small:
- \snippet quick/touchinteraction/flickable/basic-flickable.qml 0
+ \snippet touchinteraction/flickable/basic-flickable.qml 0
Corkboards shows a more complex Flickable usecase, with types on the flickable that respond to mouse and keyboard interaction.
This doesn't require special code, the Qt Quick types automatically cooperate with Flickable for accepting the touch events.
\endlist
\section1 Switch.qml
-\snippet quick/ui-components/slideswitch/content/Switch.qml 0
+\snippet ui-components/slideswitch/content/Switch.qml 0
\section1 Walkthrough
\section2 Interface
-\snippet quick/ui-components/slideswitch/content/Switch.qml 1
+\snippet ui-components/slideswitch/content/Switch.qml 1
This property is the interface of the switch. By default, the switch is off and this property is \c false.
It can be used to activate/disactivate the switch or to query its current state.
the text will only be visible when the switch is on.
\section2 Images and user interaction
-\snippet quick/ui-components/slideswitch/content/Switch.qml 4
+\snippet ui-components/slideswitch/content/Switch.qml 4
First, we create the background image of the switch.
In order for the switch to toggle when the user clicks on the background, we add a \l{MouseArea} as a child item of the image.
A \c MouseArea has a \c onClicked property that is triggered when the item is clicked. For the moment we will just call a
\c toggle() function. We will see what this function does in a moment.
-\snippet quick/ui-components/slideswitch/content/Switch.qml 5
+\snippet ui-components/slideswitch/content/Switch.qml 5
Then, we place the image of the knob on top of the background.
The interaction here is a little more complex. We want the knob to move with the finger when it is clicked. That is what the \c drag
in the \c dorelease() function that is called in the \c onReleased property.
\section2 States
-\snippet quick/ui-components/slideswitch/content/Switch.qml 6
+\snippet ui-components/slideswitch/content/Switch.qml 6
We define the two states of the switch:
\list
We add two JavaScript functions to our switch:
-\snippet quick/ui-components/slideswitch/content/Switch.qml 2
+\snippet ui-components/slideswitch/content/Switch.qml 2
This first function is called when the background image or the knob are clicked. We simply want the switch to toggle between the two
states (\e on and \e off).
-\snippet quick/ui-components/slideswitch/content/Switch.qml 3
+\snippet ui-components/slideswitch/content/Switch.qml 3
This second function is called when the knob is released and we want to make sure that the knob does not end up between states
(neither \e on nor \e off). If it is the case call the \c toggle() function otherwise we do nothing.
For more information on scripts see \l{Using JavaScript Expressions in QML}.
\section2 Transition
-\snippet quick/ui-components/slideswitch/content/Switch.qml 7
+\snippet ui-components/slideswitch/content/Switch.qml 7
At this point, when the switch toggles between the two states the knob will instantly change its \c x position between 1 and 78.
In order for the knob to move smoothly we add a transition that will animate the \c x property with an easing curve for a duration of 200ms.
\section1 Usage
The switch can be used in a QML file, like this:
-\snippet quick/ui-components/slideswitch/slideswitch.qml 0
+\snippet ui-components/slideswitch/slideswitch.qml 0
*/
This is a collection of small QML examples relating to model and view functionality. They demonstrate how to show data from a model using the \l {Qt Quick} view types.
\section2 GridView and PathView demonstrate usage of these types to display views.
- \snippet quick/views/gridview/gridview-example.qml 0
+ \snippet views/gridview/gridview-example.qml 0
\section2 Dynamic List demonstrates animation of runtime additions and removals to a ListView.
The ListView.onAdd signal handler runs an animation when new items are added to the
view, and the ListView.onRemove another when they are removed.
- \snippet quick/views/listview/dynamiclist.qml 0
- \snippet quick/views/listview/dynamiclist.qml 1
+ \snippet views/listview/dynamiclist.qml 0
+ \snippet views/listview/dynamiclist.qml 1
\section2 Expanding Delegates demonstrates delegates that expand when activated.
It has a complex delegate the size and appearance of which can change, displacing
other items in the view.
- \snippet quick/views/listview/expandingdelegates.qml 0
- \snippet quick/views/listview/expandingdelegates.qml 1
- \snippet quick/views/listview/expandingdelegates.qml 2
- \snippet quick/views/listview/expandingdelegates.qml 3
+ \snippet views/listview/expandingdelegates.qml 0
+ \snippet views/listview/expandingdelegates.qml 1
+ \snippet views/listview/expandingdelegates.qml 2
+ \snippet views/listview/expandingdelegates.qml 3
\section2 Highlight demonstrates adding a custom highlight to a ListView.
- \snippet quick/views/listview/highlight.qml 0
+ \snippet views/listview/highlight.qml 0
\section2 Highlight Ranges shows the three different highlight range modes of ListView.
- \snippet quick/views/listview/highlightranges.qml 0
- \snippet quick/views/listview/highlightranges.qml 1
- \snippet quick/views/listview/highlightranges.qml 2
+ \snippet views/listview/highlightranges.qml 0
+ \snippet views/listview/highlightranges.qml 1
+ \snippet views/listview/highlightranges.qml 2
\section2 Sections demonstrates the various section headers and footers available to ListView.
- \snippet quick/views/listview/sections.qml 0
+ \snippet views/listview/sections.qml 0
\section2 Packages demonstrates using Packages to transition delegates between two views.
It has a Package which defines delegate items for each view and an item that can
be transferred between delegates.
- \snippet quick/views/package/Delegate.qml 0
+ \snippet views/package/Delegate.qml 0
A DelegateModel allows the individual views to access their specific items from
the shared package delegate.
- \snippet quick/views/package/view.qml 0
+ \snippet views/package/view.qml 0
\section2 ObjectModel uses an ObjectModel for the model instead of a ListModel.
- \snippet quick/views/visualitemmodel/visualitemmodel.qml 0
+ \snippet views/objectmodel/objectmodel.qml 0
*/
The API can be used from JavaScript functions in your QML:
-\snippet quick/localstorage/localstorage/hello.qml 0
+\snippet localstorage/localstorage/hello.qml 0
The API conforms to the Synchronous API of the HTML5 Web Database API,
\link http://www.w3.org/TR/2009/WD-webdatabase-20091029/ W3C Working Draft 29 October 2009\endlink.
In the following example, the client developer defines a \c Button type with
a document in a file:
-\snippet ../src/quick/doc/snippets/qml/qml-extending-types/components/Button.qml 0
+\snippet ../quick/doc/snippets/qml/qml-extending-types/components/Button.qml 0
The \c Button type can then be used in an application:
\table
\row
-\li \snippet ../src/quick/doc/snippets/qml/qml-extending-types/components/application.qml 0
+\li \snippet ../quick/doc/snippets/qml/qml-extending-types/components/application.qml 0
\li \image button-types.png
\endtable
This is defined by the main application file, \c samegame.qml, which looks like this:
-\snippet quick/tutorials/samegame/samegame1/samegame.qml 0
+\snippet tutorials/samegame/samegame1/samegame.qml 0
This gives you a basic game window that includes the main canvas for the
blocks, a "New Game" button and a score display.
To create a functional button, we use the QML types \l Text and \l MouseArea inside a \l Rectangle.
Here is the \c Button.qml code:
-\snippet quick/tutorials/samegame/samegame1/Button.qml 0
+\snippet tutorials/samegame/samegame1/Button.qml 0
This essentially defines a rectangle that contains text and can be clicked. The \l MouseArea
has an \c onClicked() handler that is implemented to emit the \c clicked() signal of the
Each block is just an item that contains an image. The block
code is defined in a separate \c Block.qml file:
-\snippet quick/tutorials/samegame/samegame1/Block.qml 0
+\snippet tutorials/samegame/samegame1/Block.qml 0
At the moment, the block doesn't do anything; it is just an image. As the
tutorial progresses we will animate and give behaviors to the blocks.
Here is the JavaScript code for generating the blocks, contained in a new
file, \c samegame.js. The code is explained below.
-\snippet quick/tutorials/samegame/samegame2/samegame.js 0
+\snippet tutorials/samegame/samegame2/samegame.js 0
The \c startNewGame() function deletes the blocks created in the previous game and
calculates the number of rows and columns of blocks required to fill the game window for the new game.
To do this, we add this line to \c samegame.qml which imports
the JavaScript file as a \l{QML Modules}{module}:
-\snippet quick/tutorials/samegame/samegame2/samegame.qml 2
+\snippet tutorials/samegame/samegame2/samegame.qml 2
This allows us to refer to any functions within \c samegame.js using "SameGame"
as a prefix: for example, \c SameGame.startNewGame() or \c SameGame.createBlock().
This means we can now connect the New Game button's \c onClicked handler to the \c startNewGame()
function, like this:
-\snippet quick/tutorials/samegame/samegame2/samegame.qml 1
+\snippet tutorials/samegame/samegame2/samegame.qml 1
So, when you click the New Game button, \c startNewGame() is called and generates a field of blocks, like this:
To make it easier for the JavaScript code to interface with the QML types, we have added an Item called \c gameCanvas to \c samegame.qml. It replaces the background as the item which contains the blocks. It also accepts mouse input from the user. Here is the item code:
-\snippet quick/tutorials/samegame/samegame3/samegame.qml 1
+\snippet tutorials/samegame/samegame3/samegame.qml 1
The \c gameCanvas item is the exact size of the board, and has a \c score property and a \l MouseArea to handle mouse clicks.
The blocks are now created as its children, and its dimensions are used to determine the board size so that
When clicked, the \l MouseArea calls \c{handleClick()} in \c samegame.js, which determines whether the player's click should cause any blocks to be removed, and updates \c gameCanvas.score with the current score if necessary. Here is the \c handleClick() function:
-\snippet quick/tutorials/samegame/samegame3/samegame.js 1
+\snippet tutorials/samegame/samegame3/samegame.js 1
Note that if \c score was a global variable in the \c{samegame.js} file you would not be able to bind to it. You can only bind to QML properties.
When the player clicks a block and triggers \c handleClick(), \c handleClick() also calls \c victoryCheck() to update the score and to check whether the player has completed the game. Here is the \c victoryCheck() code:
-\snippet quick/tutorials/samegame/samegame3/samegame.js 2
+\snippet tutorials/samegame/samegame3/samegame.js 2
This updates the \c gameCanvas.score value and displays a "Game Over" dialog if the game is finished.
The Game Over dialog is created using a \c Dialog type that is defined in \c Dialog.qml. Here is the \c Dialog.qml code. Notice how it is designed to be usable imperatively from the script file, via the functions and signals:
-\snippet quick/tutorials/samegame/samegame3/Dialog.qml 0
+\snippet tutorials/samegame/samegame3/Dialog.qml 0
And this is how it is used in the main \c samegame.qml file:
-\snippet quick/tutorials/samegame/samegame3/samegame.qml 2
+\snippet tutorials/samegame/samegame3/samegame.qml 2
We give the dialog a \l {Item::z}{z} value of 100 to ensure it is displayed on top of our other components. The default \c z value for an item is 0.
It's not much fun to play Same Game if all the blocks are the same color, so we've modified the \c createBlock() function in \c samegame.js to randomly create a different type of block (for either red, green or blue) each time it is called. \c Block.qml has also changed so that each block contains a different image depending on its type:
-\snippet quick/tutorials/samegame/samegame3/Block.qml 0
+\snippet tutorials/samegame/samegame3/Block.qml 0
\section2 A working game
This is what \c samegame.qml looks like now:
-\snippet quick/tutorials/samegame/samegame3/samegame.qml 0
+\snippet tutorials/samegame/samegame3/samegame.qml 0
The game works, but it's a little boring right now. Where are the smooth animated transitions? Where are the high scores?
If you were a QML expert you could have written these in the first iteration, but in this tutorial they've been saved
block will follow and animate its movement in a spring-like fashion towards the specified position (whose
values will be set by \c samegame.js).Here is the code added to \c BoomBlock.qml:
-\snippet quick/tutorials/samegame/samegame4/content/BoomBlock.qml 1
+\snippet tutorials/samegame/samegame4/content/BoomBlock.qml 1
The \c spring and \c damping values can be changed to modify the spring-like effect of the animation.
visible and invisible. To do this, we'll apply a \l Behavior on the \c opacity property of the \c Image
type in \c BoomBlock.qml:
-\snippet quick/tutorials/samegame/samegame4/content/BoomBlock.qml 2
+\snippet tutorials/samegame/samegame4/content/BoomBlock.qml 2
Note the \c{opacity: 0} which means the block is transparent when it is first created. We could set the opacity
in \c samegame.js when we create and destroy the blocks,
Finally, we'll add a cool-looking particle effect to the blocks when they are destroyed. To do this, we first add a \l ParticleSystem in
\c BoomBlock.qml, like so:
-\snippet quick/tutorials/samegame/samegame4/content/BoomBlock.qml 3
+\snippet tutorials/samegame/samegame4/content/BoomBlock.qml 3
To fully understand this you should read the \l Particles documentation, but it's important to note that \c emitRate is set
to zero so that particles are not emitted normally.
Also, we extend the \c dying State, which creates a burst of particles by calling the \c burst() method on the particles type. The code for the states now look
like this:
-\snippet quick/tutorials/samegame/samegame4/content/BoomBlock.qml 4
+\snippet tutorials/samegame/samegame4/content/BoomBlock.qml 4
Now the game is beautifully animated, with subtle (or not-so-subtle) animations added for all of the
player's actions. The end result is shown below, with a different set of images to demonstrate basic theming:
This requires a few changes to \c Dialog.qml. In addition to a \c Text type, it now has a
\c TextInput child item for receiving keyboard text input:
-\snippet quick/tutorials/samegame/samegame4/content/Dialog.qml 0
+\snippet tutorials/samegame/samegame4/content/Dialog.qml 0
\dots 4
-\snippet quick/tutorials/samegame/samegame4/content/Dialog.qml 2
+\snippet tutorials/samegame/samegame4/content/Dialog.qml 2
\dots 4
-\snippet quick/tutorials/samegame/samegame4/content/Dialog.qml 3
+\snippet tutorials/samegame/samegame4/content/Dialog.qml 3
We'll also add a \c showWithInput() function. The text input will only be visible if this function
is called instead of \c show(). When the dialog is closed, it emits a \c closed() signal, and
other types can retrieve the text entered by the user through an \c inputText property:
-\snippet quick/tutorials/samegame/samegame4/content/Dialog.qml 0
-\snippet quick/tutorials/samegame/samegame4/content/Dialog.qml 1
+\snippet tutorials/samegame/samegame4/content/Dialog.qml 0
+\snippet tutorials/samegame/samegame4/content/Dialog.qml 1
\dots 4
-\snippet quick/tutorials/samegame/samegame4/content/Dialog.qml 3
+\snippet tutorials/samegame/samegame4/content/Dialog.qml 3
Now the dialog can be used in \c samegame.qml:
-\snippet quick/tutorials/samegame/samegame4/samegame.qml 0
+\snippet tutorials/samegame/samegame4/samegame.qml 0
When the dialog emits the \c closed signal, we call the new \c saveHighScore() function in \c samegame.js, which stores the high score locally in an SQL database and also send the score to an online database if possible.
The \c nameInputDialog is activated in the \c victoryCheck() function in \c samegame.js:
-\snippet quick/tutorials/samegame/samegame4/content/samegame.js 3
+\snippet tutorials/samegame/samegame4/content/samegame.js 3
\dots 4
-\snippet quick/tutorials/samegame/samegame4/content/samegame.js 4
+\snippet tutorials/samegame/samegame4/content/samegame.js 4
\section3 Storing high scores offline
Here is the \c saveHighScore() function in \c samegame.js:
-\snippet quick/tutorials/samegame/samegame4/content/samegame.js 2
+\snippet tutorials/samegame/samegame4/content/samegame.js 2
First we call \c sendHighScore() (explained in the section below) if it is possible to send the high scores to an online database.
If the player enters a name, we send the data to the service using this code in \c samegame.js:
-\snippet quick/tutorials/samegame/samegame4/content/samegame.js 1
+\snippet tutorials/samegame/samegame4/content/samegame.js 1
The \l XMLHttpRequest in this code is the same as the \c XMLHttpRequest() as you'll find in standard browser JavaScript, and can be used in the same way to dynamically get XML
or QML from the web service to display the high scores. We don't worry about the response in this case - we just post the high
Here is a ListView with a delegate that references its model item's
value using the \c modelData role:
-\snippet quick/models/stringlistmodel/view.qml 0
+\snippet models/stringlistmodel/view.qml 0
A Qt application can load this QML document and set the value of \c myModel
to a QStringList:
-\snippet quick/models/stringlistmodel/main.cpp 0
+\snippet models/stringlistmodel/main.cpp 0
The complete source code for this example is available in
\l {quick/modelviews/stringlistmodel}{examples/quick/modelviews/stringlistmodel}
Q_PROPERTY values that will be accessible as named roles when a
QList<DataObject*> is exposed to QML:
-\snippet quick/models/objectlistmodel/dataobject.h 0
+\snippet models/objectlistmodel/dataobject.h 0
\dots 4
-\snippet quick/models/objectlistmodel/dataobject.h 1
+\snippet models/objectlistmodel/dataobject.h 1
\codeline
-\snippet quick/models/objectlistmodel/main.cpp 0
+\snippet models/objectlistmodel/main.cpp 0
\dots
The QObject* is available as the \c modelData property. As a convenience,
delegate's context. Here, \c view.qml references the \c DataModel properties in
the ListView delegate:
-\snippet quick/models/objectlistmodel/view.qml 0
+\snippet models/objectlistmodel/view.qml 0
Note the use of \c color property with qualifier.
The properties of the object are not replicated in the \c model
QAbstractItemModel::roleNames() to expose the role names, so that they can be
accessed via QML:
-\snippet quick/models/abstractitemmodel/model.h 0
+\snippet models/abstractitemmodel/model.h 0
\dots
-\snippet quick/models/abstractitemmodel/model.h 1
+\snippet models/abstractitemmodel/model.h 1
\dots
-\snippet quick/models/abstractitemmodel/model.h 2
+\snippet models/abstractitemmodel/model.h 2
\codeline
-\snippet quick/models/abstractitemmodel/model.cpp 0
+\snippet models/abstractitemmodel/model.cpp 0
\codeline
-\snippet quick/models/abstractitemmodel/main.cpp 0
+\snippet models/abstractitemmodel/main.cpp 0
\dots
This model is displayed by a ListView delegate that accesses the \e type and \e size
roles:
-\snippet quick/models/abstractitemmodel/view.qml 0
+\snippet models/abstractitemmodel/view.qml 0
QML views are automatically updated when the model changes. Remember the model
must follow the standard rules for model changes and notify the view when
The code for the ListView and delegate looks like this:
-\snippet quick/tutorials/dynamicview/dynamicview1/dynamicview.qml 0
+\snippet tutorials/dynamicview/dynamicview1/dynamicview.qml 0
The model is defined in a separate QML file which looks like this:
-\snippet quick/tutorials/dynamicview/dynamicview1/PetsModel.qml 0
-\snippet quick/tutorials/dynamicview/dynamicview1/PetsModel.qml 1
+\snippet tutorials/dynamicview/dynamicview1/PetsModel.qml 0
+\snippet tutorials/dynamicview/dynamicview1/PetsModel.qml 1
\section2 Walkthrough
The \c name, \c age, \c type, and \c size variables referenced in the delegate are sourced from
the model data. The names correspond to roles defined in the model.
-\snippet quick/tutorials/dynamicview/dynamicview1/dynamicview.qml 1
+\snippet tutorials/dynamicview/dynamicview1/dynamicview.qml 1
The second part of the application is the ListView itself to which we bind the model and delegate.
-\snippet quick/tutorials/dynamicview/dynamicview1/dynamicview.qml 2
+\snippet tutorials/dynamicview/dynamicview1/dynamicview.qml 2
*/
/*!
by extending the delegate so the visible content can be dragged up and down the screen. The
updated delegate looks like this:
-\snippet quick/tutorials/dynamicview/dynamicview2/dynamicview.qml 0
+\snippet tutorials/dynamicview/dynamicview2/dynamicview.qml 0
\section2 Walkthrough
a container for the content item which is important as a delegate's root item is positioned by
the view and cannot be moved by other means.
-\snippet quick/tutorials/dynamicview/dynamicview2/dynamicview.qml 1
-\snippet quick/tutorials/dynamicview/dynamicview2/dynamicview.qml 2
+\snippet tutorials/dynamicview/dynamicview2/dynamicview.qml 1
+\snippet tutorials/dynamicview/dynamicview2/dynamicview.qml 2
Dragging the content item is enabled by binding it to the MouseArea's
\l {QtQuick2::MouseArea::drag.target}{drag.target} property. Because we still want the view to be
dragging an item. To make it more obvious to the user when an item can be dragged we'll change the
background color of the content item when the timeout has expired.
-\snippet quick/tutorials/dynamicview/dynamicview2/dynamicview.qml 3
+\snippet tutorials/dynamicview/dynamicview2/dynamicview.qml 3
The other thing we'll need to do before an item can be dragged is to unset any anchors on the
content item so it can be freely moved around. We do this in a state change that is triggered
when the delegate item is held, at the same time we can reparent the content item to the root item
so that is above other items in the stacking order and isn't obscured as it is dragged around.
-\snippet quick/tutorials/dynamicview/dynamicview2/dynamicview.qml 4
+\snippet tutorials/dynamicview/dynamicview2/dynamicview.qml 4
*/
can re-order the list. To achieve this we introduce three new types to our application;
VisualDataModel, \l Drag and DropArea.
-\snippet quick/tutorials/dynamicview/dynamicview3/dynamicview.qml 0
-\snippet quick/tutorials/dynamicview/dynamicview3/dynamicview.qml 1
-\snippet quick/tutorials/dynamicview/dynamicview3/dynamicview.qml 2
-\snippet quick/tutorials/dynamicview/dynamicview3/dynamicview.qml 5
+\snippet tutorials/dynamicview/dynamicview3/dynamicview.qml 0
+\snippet tutorials/dynamicview/dynamicview3/dynamicview.qml 1
+\snippet tutorials/dynamicview/dynamicview3/dynamicview.qml 2
+\snippet tutorials/dynamicview/dynamicview3/dynamicview.qml 5
\section2 Walkthrough
the Drag attached property we can generate events that are sent to the scene graph whenever the item
it is attached to moves.
-\snippet quick/tutorials/dynamicview/dynamicview3/dynamicview.qml 1
+\snippet tutorials/dynamicview/dynamicview3/dynamicview.qml 1
Drag events are only sent while the active property is true, so in this example the first event
would be sent when the delegate was held with additional event sents when dragging. The
intersects another item, when a drag enters one of these DropAreas we can move the dragged item
to the index of the item it was dragged over.
-\snippet quick/tutorials/dynamicview/dynamicview3/dynamicview.qml 3
+\snippet tutorials/dynamicview/dynamicview3/dynamicview.qml 3
To move the items within the view we use a VisualDataModel. The VisualDataModel type is used by
the view types to instantiate delegate items from model data and when constructed explicitly can
property of the view and bind the \l {QtQuick2::VisualDataModel::model}{model} and
\l {QtQuick2::VisualDataModel::delegate}{delegate} to the VisualDataModel.
-\snippet quick/tutorials/dynamicview/dynamicview3/dynamicview.qml 4
+\snippet tutorials/dynamicview/dynamicview3/dynamicview.qml 4
*/
also possible to sort items based on model data. To do that we extend our VisualDataModel instance
like this:
-\snippet quick/tutorials/dynamicview/dynamicview4/dynamicview.qml 0
+\snippet tutorials/dynamicview/dynamicview4/dynamicview.qml 0
\section2 Walkthrough
position in the items group. To do that we clear includeByDefault on the items group and set it on
a new group name 'unsorted'.
-\snippet quick/tutorials/dynamicview/dynamicview4/dynamicview.qml 1
-\snippet quick/tutorials/dynamicview/dynamicview4/dynamicview.qml 2
+\snippet tutorials/dynamicview/dynamicview4/dynamicview.qml 1
+\snippet tutorials/dynamicview/dynamicview4/dynamicview.qml 2
We sort the items by first finding the position in the items group to insert the first unsorted
item and then transfer the item to the items group before moving it to the pre-determined index and
handle we can access the same model data that is available in a delegate instance of that item and
compare against other items to determine relative position.
-\snippet quick/tutorials/dynamicview/dynamicview4/dynamicview.qml 3
+\snippet tutorials/dynamicview/dynamicview4/dynamicview.qml 3
The lessThan argument to the sort function is a comparsion function which will determine the order
of the list. In this example it can be one of the following:
-\snippet quick/tutorials/dynamicview/dynamicview4/dynamicview.qml 4
+\snippet tutorials/dynamicview/dynamicview4/dynamicview.qml 4
A sort is triggered whenever new items are added to the unsorted VisualDataGroup which we are
notified of by the \l {QtQuick2::VisualDataGroup::onChanged}{onChanged} handler. If no sort
function is currently selected we simply transfer all items from the unsorted group to the items
group, otherwise we call sort with the selected sort function.
-\snippet quick/tutorials/dynamicview/dynamicview4/dynamicview.qml 5
+\snippet tutorials/dynamicview/dynamicview4/dynamicview.qml 5
Finally when the selected sort order changes we can trigger a full re-sort of the list by moving
all items from the items group to the unsorted group, which will trigger the
items group in correct order. Note that the \l {QtQuick2::VisualDataGroup::onChanged}{onChanged}
handler will not be invoked recursively so there's no issue with it being invoked during a sort.
-\snippet quick/tutorials/dynamicview/dynamicview4/dynamicview.qml 6
+\snippet tutorials/dynamicview/dynamicview4/dynamicview.qml 6
*/
each section.
- \snippet quick/views/listview/sections.qml 0
+ \snippet views/listview/sections.qml 0
\image qml-listview-sections-example.png
an image provider named "colors", and the images to be loaded are "yellow"
and "red", respectively:
- \snippet quick/imageprovider/imageprovider-example.qml 0
+ \snippet imageprovider/imageprovider-example.qml 0
When these images are loaded by QML, it looks for a matching image provider
and calls its requestImage() or requestPixmap() method (depending on its
requested by the above QML. This implementation dynamically
generates QPixmap images that are filled with the requested color:
- \snippet quick/imageprovider/imageprovider.cpp 0
+ \snippet imageprovider/imageprovider.cpp 0
\codeline
- \snippet quick/imageprovider/imageprovider.cpp 1
+ \snippet imageprovider/imageprovider.cpp 1
To make this provider accessible to QML, it is registered with the QML engine
with a "colors" identifier: