Qt Quick Examples and Tutorials

The examples are packaged with the Qt installers and are accessed through Qt Creator. For more information about running examples in Qt Creator, visit the Building and Running an Example page.

Open and run examples within Qt Creator's Welcome mode. Most of the examples run on various platforms and to search for platform-specific examples, type the platform name (or any keywords) in the search field. For example, typing mobile in the search field lists the examples that are fully compatible with the mobile platforms.

To view other examples and tutorials, visit the Qt Examples And Tutorials page.

Here is a list of fully-functional demo applications. They are full applications that show how a deployable Qt application is built and structured. Many of the demos are deployable to mobile and desktop platforms.

• Calqlatr: A Qt Quick app designed for portrait devices that uses custom components, animated with AnimationController, and JavaScript for the application logic.

• Coffee Machine: A Qt Quick application with a state-based custom user interface.

• Dice: A dice throwing application that demonstrates using Qt Quick 3D Physics and Qt Quick 3D.

• FX & Material Showroom: Demonstrates material and effects capabilities of Qt Quick 3D. This example demonstrates how you can use particle effects and materials in Qt Quick 3D.

• Photo Surface: A QML app for touch devices that uses a Repeater with a FolderListModel to access content in a folder, and a PinchHandler to handle pinch gestures on the fetched content.

• Qt Quick Demo - Clocks: A QML clock application that demonstrates using a ListView type to display data generated by a ListModel and a SpringAnimation type to animate images.

• Qt Quick Demo - RESTful Color Palette API client: Example of how to create a RESTful API QML client.

• Qt Quick Demo - RSS News: A QML RSS news reader that uses XmlListModel and XmlListModelRole custom QML types to download XML data, ListModel and ListElement to create a category list, and ListView to display the data.

• Qt Quick Demo - StocQt: A configurable stock chart for the NASDAQ-100.

• Robot Arm Example: Demonstrates how to add a C++ backend to a 3D project from Qt Design Studio. This example demonstrates adding a C++ backend to a 3D project created in Qt Design Studio. The example itself consists of an interactive industrial robot arm in a Qt Quick 3D scene. The 2D UI to control the robot arm is implement using Qt Quick Controls.

• Thermostat: A user interface for a home thermostat, implemented in Qt Quick. It demonstrates how to create responsive applications that scale from large desktop displays to mobile and small embedded displays.

• To Do List Example: A QML implementation of to do list application that demonstrates how to create application thats looks native on any platform.

The following pages show how to develop Qt applications using Qt Creator and Qt Quick. The pages demonstrate various steps such as use cases and introductory material. For more information about Qt Quick Applications and related modules, visit the QML Applications page.

Development Environment

• Creating Qt Quick Projects

• Using QML Modules with Plugins

Beginning with QML and Qt Quick

• First Steps with QML

• Qt Quick Text Editor

• Qt Design Studio Tutorials

• SameGame

Use Cases

• Visual types in QML

• Responding to User Input in QML

• Animations in QML

• Displaying Text in QML

• Layouts in QML

• Style and Theme Support

• Integrating JavaScript in QML

Extending QML▲

Examples are small applications which show how to implement various Qt Quick features. The examples run on various platforms and are opened from within Qt Creator.

QML Types and Controls

• Controls Gallery

• TableView

• Text and Fonts

Layouts and Views

• Qt Quick Layouts - Basic Example

• Positioners

• Views

• Windows and Screen

Image and Graphics

• Image Elements

• Animation

• Canvas API

• Shader Effects

• MultiEffect

• MultiEffect-based Item Transitions

Keyboard, Focus, and Touch

• Key Interaction

• MouseArea

System and Events

• Threading

• Accessibility

• External Drag and Drop

• Drag and Drop

• Item Variable Refresh Rate

Scene Graph

• Custom Material

• Texture Providers and Materials

• Custom Geometry

• Graph

• OpenGL Under QML

• Direct3D 11 Under QML

• Vulkan Under QML

• Vulkan Texture Import

• Metal Under QML

• Metal Texture Import

• Rendering to OpenGL FBOs

Adding Qt Quick scenes in QWidget applications

• Using QQuickWidget

• QQuickWidget - QQuickView Comparison (OpenGL)

• Embedding a QQuickView as Native Window