Qt Quick Reference Documentation

Advanced Text Example

Running the Example

Animation and Transitions in Qt Quick

Animation and Transitions Types

Triggering Animations

Direct Property Animation

Using Predefined Targets and Properties

Transitions During State Changes

Default Animation as Behaviors

Playing Animations in Parallel or in Sequence

Controlling Animations

Animation Playback

Easing

Other Animation Types

Sharing Animation Instances

Best Practices for QML and Qt Quick

Custom UI Controls

Related Information

Coding Conventions

Bundle Application Resources

Related Information

Separate UI from Business Logic

Exposing Data from C++ to QML

Related Information

Using Qt Design Studio

Related Information

Using Qt Quick Views

Store State in Models

Using Qt Quick Layouts

Dos

Don'ts

Related Information

Type Safety

Property change signals

Performance

Prefer Declarative Bindings Over Imperative Assignments

Don't store state in delegates

Make user-facing strings translatable

Do not customize native styles

Tools and Utilities

Scene Graph

Scalable User Interfaces

Related Information

C++ Extension Points Provided By Qt Quick

User-Defined QQuickItem-Derived Types

Scene Graph-Related Classes

Pixmap and Threaded Image Support

C++ Extensions: Image Provider Example

C++ Extensions: Image Response Provider Example

Changes to Qt Quick

Changes to Qt Quick QML Types

Changed Type of font.weight

FontLoader.name Is Now a Read-Only Property

The OpenGLInfo QML Type Is Removed

ShaderEffect No Longer Supports Inline GLSL Shader Strings

ShaderEffect Source Properties Are Now URLs

Changes to Qt Quick C++ APIs

Changes to QQuickItem

Changes to QQuick* APIs

Changes to QSG* APIs

Changes to OpenGL Use in Qt Quick

Concepts - Visual Coordinates in Qt Quick

Item Coordinates

Scene Coordinates

Worked Example

Concepts - Visual Parent in Qt Quick

Visual Parent

Item Coordinates

Stacking Order

Canvas Ownership

Exposing QtAbstractListModel to QML

Overview

Running the example

QML project

Kotlin project

Data model

Main activity

Gear Icon

Georama

Important Concepts In Qt Quick - Convenience Types

Dynamic Object Instantiation

Dynamic Bindings

Dynamic Signal Connections

Timer-Based Events

Important Concepts In Qt Quick - Data - Models, Views and Data Storage

Models and Views

Data Storage and Access

Important Concepts In Qt Quick - Graphical Effects

Graphical Effects and Particles

Visual Transformation

Shader Effects

Particles

Sprites

Opacity

Important Concepts In Qt Quick - Positioning

Manual Positioning

Positioning With Bindings

Anchors

Positioners

Layouts

Right-To-Left Support

Important Concepts In Qt Quick - The Visual Canvas

Coordinate System

Visual Parent

Scene Graph

Important Concepts In Qt Quick - User Input

Input from Pointing Devices

Keyboard Input and Keyboard Focus

Important Concepts In Qt Quick - Visual Types

Important Concepts in Qt Quick - States, Transitions and Animations

States

Transitions

Animations

Animating Property Assignments

Animators

Animated Sprites

Item Positioners

Positioners

Column Items

Row Items

Grid Items

Flow Items

Other Ways to Position Items

Keyboard Focus in Qt Quick

Key Handling Overview

Querying the Active Focus Item

Acquiring Focus and Focus Scopes

Advanced Uses of Focus Scopes

Map of Europe from Wikipedia

Models and Views in Qt Quick

qml-c++-models

Displaying Data with Views

Decorating Views

Mouse and Touch Handling

ListView Sections

View Delegates

Positioning of View Delegates

Accessing Views and Models from Delegates

Models

List Model

XML Model

Object Model

Integers as Models

Object Instances as Models

C++ Data Models

Array models

Repeaters

Changing Model Data

Using Transitions

Models and Views: AbstractItemModel Example

Models and Views: Object ListModel Example

Models and Views: String ListModel Example

Mouse Events

Mouse Types

Mouse Event Handling

Defining a Mouse Area

Receiving Events

Enabling Gestures

MouseEvent Object

Accepting Further Signals

Particle System Performance Guide

Positioning with Anchors

Anchor Margins and Offsets

Changing Anchors

Restrictions

QML Advanced Tutorial

QML Advanced Tutorial 1 - Creating the Game Canvas and Blocks

Creating the Application Screen

Adding Button and Block Components

QML Advanced Tutorial 2 - Populating the Game Canvas

Generating the Blocks in JavaScript

Connecting JavaScript Components to QML

QML Advanced Tutorial 3 - Implementing the Game Logic

Making a Playable Game

Enabling Mouse Click Interaction

Updating the Score

A Dash of Color

A Working Game

QML Advanced Tutorial 4 - Finishing Touches

Adding Some Flair

Animating Block Movement

Animating Block Opacity Changes

Adding Particle Effects

Keeping a High Scores Table

Storing High Scores Offline

Storing High Scores Online

That's It!

QML Dynamic View Ordering Tutorial

QML Dynamic View Ordering Tutorial 1 - A Simple ListView and Delegate

Walkthrough

QML Dynamic View Ordering Tutorial 2 - Dragging View Items

Walkthrough

QML Dynamic View Ordering Tutorial 3 - Moving Dragged Items

Walkthrough

QML Dynamic View Ordering Tutorial 4 - Sorting Items

Walkthrough

QML Previewer Example

QML Tutorial

QML Tutorial 1 - Value Types

Walkthrough

Import

Rectangle Type

Text Type

Viewing the Example

QML Tutorial 2 - QML Components

Walkthrough

The Cell Component

The Main QML File

QML Tutorial 3 - States and Transitions

Walkthrough

QQuickRenderControl D3D11 Example

QQuickRenderControl OpenGL Example

QQuickRenderControl RHI Example

QQuickWidget - QQuickView Comparison Example

Qt Quick

Using the Module

QML API

C++ API

Building with CMake

Building with qmake

Important Concepts in Qt Quick

C++ Extension Points

Articles and Guides

Examples

Reference

Qt Academy Courses

Licenses and Attributions

Qt Quick Android Classes

Qt Quick Examples - Accessibility

Running the Example

Implementing Accessible Buttons

Qt Quick Examples - Animation

Running the Example

ColorAnimation

PropertyAnimation

Animators

Behaviors

Wiggly Text

Tv Tennis

Easing Curves

States

Transitions

PathAnimation

PathInterpolator

Qt Quick Examples - Canvas

Running the Example

Red Heart

Talk Bubble

Squircle

Rounded Rectangle

Smile Face

Clip

Tiger

Qt Quick Examples - Drag and Drop

Running the Example

Tiles

GridView Example

Qt Quick Examples - Embedded in Widgets

Running the Example

Qt Quick Examples - Image Elements

Running the Example

Scaling with BorderImage

Image Fill

Shadow Effects

Sprite Animations with AnimatedSprite

Sprite Animations with SpriteSequence

Qt Quick Examples - Item Variable Refresh Rate

Qt Quick Examples - Key Interaction

Running the Example

Qt Quick Examples - Local Storage

Running the Example

Activity Tracker

Qt Quick Examples - MouseArea

Running the Example

MouseArea Behavior

Qt Quick Examples - MultiEffect Item Switcher

Running the Example

Qt Quick Examples - MultiEffect Test Bed

Running the Example

Qt Quick Examples - Pointer Handlers

TapHandler

Multi-tap Buttons

Pie Menu

PointHandler

HoverHandler

DragHandler

PinchHandler

Interoperability

Sliders

Map

Fake Flickable

Qt Quick Examples - Positioners

Running the Example

Transitions

Attached Properties

Qt Quick Examples - Shader Effects

Running the Example

Using ShaderEffect

Qt Quick Examples - Shapes

Running the Example

Qt Quick Examples - Text

Hello

Fonts

Available Fonts

Banner

Img Tag

Text Layout

Qt Quick Examples - Views

Running the Example

Using GridView and PathView

Using Dynamic List

Expanding Delegates

Using Highlight

Using Highlight Ranges

Using Sections

Using Packages

Using ObjectModel

Using Display Margins

Qt Quick Examples - Window and Screen

Running the Example

Window Implementation

Qt Quick Examples and Tutorials

Running the Examples and Demos

Qt Quick Demos

Developing Qt Quick Applications

Extending QML

Examples

Qt Quick How-tos

Call a C++ function from QML when a Button is clicked

See which item has active focus

Create a time picker like Android's TimePickerDialog

Use a C++ enum in JavaScript

Qt Quick Input Handlers

Input Handlers

Key Features

Handlers Manipulating Items

Handler Properties and Signals

Pointer Grab

Related Information

Qt Quick Layouts

Using the Module

Layouts

Articles and Guides

Examples

Reference

Related Modules

Licenses

Qt Quick Layouts - Basic Example

Running the Example

Qt Quick Layouts - Responsive Layout Example

Running the Example

Creating items

Creating layouts

Setting the layout

Qt Quick Layouts Overview

Key features

Getting started

A simple layout

Spacing

Specifying preferred size

Size constraints

Connecting windows and layouts

Spanning and stretching Items

Qt Quick OpenVG Adaptation

EGL Requirement

Renderer

Render Loop

Shader Effects

Particle Effects

Rendering Text

Perspective Transforms

Qt Quick Particles Examples - Affectors

Qt Quick Particles Examples - Emitters

Qt Quick Particles Examples - Image Particles

Qt Quick Particles Examples - System

Qt Quick Responsive Layouts

Static hierarchy, adaptive layout

Declarative description

States

LayoutItemProxy

Adaptive hierarchy, adaptive layout

Useful links: Consult your design guidelines

Qt Quick Scene Graph

threaded_render_loop

The Scene Graph in Qt Quick

Qt Quick Scene Graph Structure

Nodes

Preprocessing

Node Ownership

Materials

Convenience Nodes

Scene Graph and Rendering

Threaded Render Loop ('threaded')

Non-threaded Render Loop ('basic')

Driving Animations

What does Advance Animations refer to in the above diagrams?

What if there is no or more than one window visible?

What if vsync-based throttling is dysfunctional, globally disabled, or the application disabled it itself?

Custom control over rendering with QQuickRenderControl

Extending the Scene Graph with QRhi-based and native 3D rendering

Underlay/overlay mode

The texture-based approach

The inline approach

Custom Items using QPainter

Logging Support

Scene Graph Backend

Qt Quick Scene Graph Default Renderer

Batching

Opaque Primitives

Alpha Blended Primitives

Mixing with 3D Primitives

Texture Atlas

Batch Roots

Transform Nodes

Clipping

Vertex Buffers

Antialiasing

Vertex Antialiasing

Multisample Antialiasing

Performance

Visualizing

Visualizing Batches

Visualizing Clipping

Visualizing Changes

Visualizing Overdraw

Rendering via the Qt Rendering Hardware Interface

Qt Quick Software Adaptation

Shader Effects

Particle Effects

Rendering Text

Qt Quick States

Related Types

Creating States

The Default State

The when Property

Animating State Changes

State Fast Forwarding

Qt Quick TableView examples - Conway’s Game of Life

Running the Example

The QML User Interface

The C++ Model

Updating the Data

Qt Quick TableViews examples - Pixelator

Running the Example

Qt Quick Text Input Handling and Validators

Text Visual Types

Validating Input Text

Qt Quick Tools and Utilities

Qt Creator

Qt Design Studio

Qt Quick Effect Maker (QQEM)

QML Debugger

QML Profiler

QmlLive

Felgo QML Hot Reload

GammaRay

Squish

The qmllint tool

qmlformat

Qt Quick Compiler

The QML Language Server tool

SVG to QML converter [tech preview]

Qt Quick Transformation Types

Item Properties

Transform List

Qt Quick View Android Class

QtQuickView

SignalListener

StatusChangeListener

Status values

setProperty()

getProperty()

addSignalListener()

getStatus()

Detailed description

Changes needed in main.cpp compared to a Qt for Android application

Known issues

Activity recreation leads to an application crash

QtQuickView in an Android Service

Multiple QtQuickViews in an Activity

Constructors

public QtQuickView(Context parent, String qmlUri, String appName)

Parameters

Throws

public QtQuickView(Context context, String qmlUri, String appName, String[] qmlImportPaths)

Parameters

Throws

Interfaces

public interface SignalListener<T>

Parameters

public interface StatusChangeListener

Parameters

Fields

Status values

Methods

public void setProperty(String propertyName, Object value)

Parameters

public <T extends Object> T getProperty(String propertyName)

Parameters

Returns

Throws

public <T> int addSignalListener(String signalName, Class<T> argType, SignalListener<T> listener)

Parameters

Returns

public boolean removeSignalListener(int signalListenerId)

Parameters

Returns

public int getStatus()

Returns

public void setStatusChangeListener(StatusChangeListener listener)

Parameters

Qt Quick Widgets

Using the Module

Building with CMake

Building with qmake quickwidgets

Reference

Licenses and Attributions

Qt Quick Widgets Example

Qt Quick for Android Studio Projects

Overview

Interacting with the QML component

Loading QtQuickViewContents into QtQuickView

Getting and setting QML component property values

Signal listeners

Right-to-left User Interfaces

Overview

Text Alignment

Layout Direction of Positioners and Views

Layout Mirroring

Mirroring Icons

Default Layout Direction

Scene Graph - Custom Geometry

BezierCurve Declaration

BezierCurve Implementation

Application Entry-Point

Using CMake

Using qmake

Using the Item

Scene Graph - Custom Material

Shader and material

Item and node

The rest of the example

Scene Graph - Custom QSGRenderNode

Scene Graph - Direct3D 11 Under QML

Scene Graph - Graph

Scene Graph - Metal Texture Import

Scene Graph - Metal Under QML

Scene Graph - OpenGL Under QML

Scene Graph - Painted Item

TextBalloon Class Declaration

TextBalloon Class Definition

textballoons.qml File

BalloonView

Controls

Scene Graph - RHI Texture Item

Comparison with other approaches

Overview

Scene Graph - RHI Under QML

Introduction

Core Concepts

Walkthrough

Scene Graph - Threaded Animation

Scene Graph - Two Texture Providers

Scene Graph - Vulkan Texture Import

Scene Graph - Vulkan Under QML

Overview

Affecting Vulkan rendering from QML

Using signals to render custom Vulkan content

Scene Graph Adaptations

Switching Between the Adaptation Used by the Application

Scene Graph Adaptations in Qt Quick

Switch Between Adaptations in Your Application

Default Adaptation

Software Adaptation

OpenVG

Sprite Animations

Sprite Engine

State Machine

Input Format

QML Types Using the Sprite Engine

AnimatedSprite Type

UI Components: Dial Control Example

UI Components: Flipable Example

Using C++ Models with Qt Quick Views

Data Provided In A Custom C++ Model

QStringList-based Model

QVariantList-based Model

QObjectList-based Model

QAbstractItemModel Subclass

SQL Models

Read-only Data Model

Editable Data Model

Exposing C++ Data Models to QML

Changing Model Data

Using Qt Quick Behaviors with States

Using Behaviors with States

Using QtAbstractItemModel in Android Studio Projects

Overview

Running the example

QML project

Android Studio project

Data Model

Main Activity

Using the Qt Quick Particle System

The ParticleSystem

Logical Particles

Particle Groups

Emitters

ParticlePainters

Affectors

Stochastic Parameters

Directions

Shapes

Vector Image Example

The Image component and Qt SVG

The VectorImage component

The svgtoqml tool

Weather Forecast Example

Different Types of Shapes

User Interface Icons

Map of Europe

Country Name Labels

Different Types of Renderers

Running the Example

Weather icons from the Noto Emoji collection

Work Sans font by Wei Huang

Accessible

Affector

Age

AnchorAnimation

AnchorChanges

AngleDirection

AnimatedImage

Example Usage

AnimatedSprite

Animation

AnimationController

Animator

Application

Attractor

Behavior

BorderImage

Example Usage

Image Loading

BorderImageMesh

BoundaryRule

Canvas

Threaded Rendering and Render Target

Pixel Operations

Tips for Porting Existing HTML5 Canvas Applications

CanvasGradient

CanvasImageData

CanvasPixelArray

CloseEvent

ColorAnimation

ColorGroup

Column

Using Transitions

ColumnLayout

ConicalGradient

Context2D

CumulativeDirection

Direction

DoubleValidator

Drag

DragEvent

DragHandler

DropArea

EllipseShape

Emitter

EnterKey

Flickable

Example Usage

Examples of contentX and contentY

Limitations

Flipable

Example Usage

Flow

FocusScope

FolderListModel

Filtering

Example Usage

Path Separators

FontLoader

FontMetrics

FrameAnimation

Friction

GestureEvent

Gradient

Example Usage

Performance and Limitations

GradientStop

GraphicsInfo

Gravity

Grid

GridLayout

GridMesh

GridView

Example Usage

GridView Layouts

GroupGoal

HoverHandler

Image

Example Usage

Compressed Texture Files

Automatic Detection of File Extension

Performance

ImageParticle

InputMethod

IntValidator

Item

Event Handling

Layout Mirroring

Item Layers

Layer Opacity vs Item Opacity

Combined with ShaderEffects

Memory and Performance

ItemGrabResult

ItemParticle

KeyEvent

KeyNavigation

Keys

Example Usage

Key Handling Priorities

Layout

LayoutItemProxy

Example Usage

LayoutMirroring

LineShape

LinearGradient

ListView

Example Usage

ListView Layouts

Flickable Direction

Stacking Order in ListView

Reusing Items

Variable Delegate Size and Section Labels

Avoid Storing State in Delegates

Hiding Delegates

Loader

Loader Sizing Behavior

Receiving Signals from Loaded Objects

Focus and Key Events

Using a Loader within a View Delegate

MaskShape

Matrix4x4

MouseArea

Example Usage

MouseEvent

MultiEffect

Example Usage

Performance

MultiPointHandler

MultiPointTouchArea

NumberAnimation

OpacityAnimator

Palette

ParallelAnimation

ParentAnimation

ParentChange

Particle

ParticleAffector

ParticleExtruder

ParticleGroup

ParticlePainter

ParticleSystem

Path

PathAngleArc

PathAnimation

PathArc

PathAttribute

PathCubic

PathCurve

PathElement

PathInterpolator

PathLine

PathMove

PathMultiline

PathPercent

PathPolyline

PathQuad

PathRectangle

PathSvg

PathText

PathView

PauseAnimation

PinchArea

PinchEvent

PinchHandler

PlanarTransform

PointDirection

PointHandler

PointerDevice

PointerDeviceHandler

PointerEvent

PointerHandler

Positioner

PropertyAction

PropertyAnimation

Modifying running animations

PropertyChanges

Resetting Property Values

Immediate Property Changes in Transitions

RadialGradient

Rectangle

Appearance

Example Usage

Performance

RectangleShape

RegularExpressionValidator

Repeater

Considerations when using Repeater

Rotation

RotationAnimation

RotationAnimator

Row

RowLayout

Scale

ScaleAnimator

Screen

ScriptAction

SequentialAnimation

Settings

Application Identifiers

Categories

Notes

ShaderEffect

Shaders

Shader Inputs and Resources

Having One Shader Only

ShaderEffect and Item Layers

Other Notes

Migrating From Qt 5

ShaderEffectSource

Shape

ShapeGradient

ShapePath

Shortcut

SinglePointHandler

SmoothedAnimation

SpringAnimation

Sprite

SpriteGoal

SpriteSequence

StackLayout

State

StateChangeScript

StateGroup

SystemPalette

TableView

Example Usage

C++ Models

QML Models

Reusing items

Row heights and column widths

Editing cells

Overlays and underlays

Selecting items

Keyboard navigation

Copy and paste

TapHandler

TargetDirection

Text

Using HTML-style

Using Markdown

TextDocument

TextEdit

TextInput

TextMetrics

TextSelection

TouchPoint

TrailEmitter

Transform

Transition

Translate

TreeView

Declare a TreeView

Creating a data model

Customize tree nodes

End-user interaction

Turbulence

UniformAnimator

Vector3dAnimation

VectorImage

ViewTransition

View Transitions: a Simple Example

Using the ViewTransition Attached Property

Delaying Animations Based on Index

Animating Items to Intermediate Positions

Handling Interrupted Animations

Restrictions Regarding ScriptAction

Wander

WavefrontMesh

WheelEvent

WheelHandler

Window

Styling

WindowContainer

XAnimator

YAnimator

color

SVG Color Reference

eventPoint

font

handlerPoint

matrix4x4

pointingDeviceUniqueId

quaternion

vector2d

vector3d

vector4d

Qt Quick Scene Graph Material Classes

Qt Quick Scene Graph Node classes

Qt Quick C++ Classes

Qt Quick Widgets C++ Classes

Qt Quick experimental animation types

Qt Labs FolderListModel QML Types

Qt Labs Settings QML Types

Qt Quick Shared Image Provider

Summary

Usage

Qt Labs WavefrontMesh QML Types

Qt Quick QML Types

Submodules

Value Types

Object Types

Qt Quick Effects QML Types

Qt Quick Effects

Qt Quick Layouts QML Types

Qt Quick Local Storage QML Types

openDatabaseSync

Methods

Detailed Description

Open or Create a Database

db.changeVersion(from, to, callback(tx))

db.transaction(callback(tx))

db.readTransaction(callback(tx))

results = tx.executeSql(statement, values)

Method Documentation

Qt Quick Particles QML Types

Qt Quick Particles

Qt Quick Shapes QML Types

Qt Quick Shapes

Qt Quick Vector Image QML Types

QML Types