Qt Quick Examples and Tutorials | Qt Quick | Qt 6.11.1
Description: Building UIs with QML

- Qt 6.11
- Qt Quick
- Qt Quick Examples and Tutorials
- Qt 6.11.1 Reference Documentation

Upgrading from Qt 5 ◦ QML Dynamic View Ordering Tutorial

# Qt Quick Examples and Tutorials

Qt includes several examples to demonstrate a particular usage. The examples run as applications or as non-GUI examples in Qt Creator. Qt tutorials show the step-by-step information and give insight to particular code snippets.

This page lists the Qt Qml and Qt Quick examples, however, many other Qt modules contain examples related to their QML API.

## Running the Examples and Demos

The examples are packaged with the Qt installers and are accessed through Qt Creator. For more information about running examples in Qt Creator, see Qt Creator: Tutorial: Build and run.

Open and run examples in the Qt Creator 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.

## Qt Quick Demos

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 calculator designed for landscape and portrait devices. It uses Qt Quick custom components and responsive layouts for the user interface, and JavaScript for the application logic
Car Configurator | A car model example that demonstrates using Qt Quick 3D cameras, extended scene environment and Qt Quick 3D
Coffee Machine | A Qt Quick application with a state-based custom user interface
Dice | A dice throwing application using Qt Quick 3D Physics and other Qt Modules
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
Graphs with CSV Data | How to visualize data from a CSV file in Qt Graphs
Lightning Viewer | An application with a responsive UI showing lightning strikes on a map in real-time by combining Qt Quick, Qt Location, Qt Positioning and Qt Websockets
OSM Buildings | A 3D building viewer of OSM (OpenStreetMap) buildings map data
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 3D - XR Physics-base teleportation demo | Demonstrates how to make physics-affected locomotion in Qt Quick 3D XR
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 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
QtJenny: Generating C++ proxy classes to access Android APIs | Demo showcasing the use of QtJenny
Robot Arm | Demonstrates how to add a C++ backend to a 3D project from Qt Design Studio
Same Game | A QML implementation of the popular puzzle game by Kuniaki Moribe
StocQt | A configurable stock chart for 100 stocks
Thermostat | Thermostat example demonstrates how to implement different designs depending on the window size
To Do List | A QML implementation of a to-do list application that demonstrates how to create an application thats looks native on any platform
Toy Customizer | A 3D customization example demonstrating interactive toy selection and real-time appearance adjustments using Qt Quick 3D

## Developing Qt Quick Applications

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

- Qt Creator: Create Qt Quick Applications
- Qt Creator: Using QML Modules with Plugins

Beginning with QML and Qt Quick

- First Steps with QML
- Alarms Application
- 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
- Integrating JavaScript in QML

### Extending QML

The following tutorials show how a QML-based application can be combined and exteneded with C++ code using the Qt Qml module.

- Writing QML Extensions with C++
- Writing advanced QML Extensions with C++

## Examples

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
- Qt Quick Controls - Table of Contents

Layouts and Views

- Qt Quick Layouts - Basic Example
- Qt Quick Layouts - Responsive Layout Example
- Positioners
- Views
- Windows and Screen
- Threaded List Model Example

Image and Graphics

- Image Elements
- Animation
- Canvas API
- Shader Effects
- MultiEffect
- MultiEffect-based Item Transitions
- RectangularShadow Effect

Shapes

- Shapes
- Weather Forecast

Keyboard, Focus, and Touch

- Key Interaction
- Pointer Handlers

System and Events

- Accessibility
- Drag and Drop
- Item Variable Refresh Rate

Scene Graph

- Custom Material
- Portable QRhi-based 3D rendering as a scene underlay
- Displaying a QRhi-rendered image in a QQuickItem
- Implementing a QRhi-based QSGRenderNode
- Redirecting Qt Quick rendering into a QRhiTexture
- Texture Providers and Materials
- Custom Geometry
- Graph

Extending the Scene Graph using native 3D APIs

- Vulkan-based 3D rendering as a scene underlay
- Implementing a custom QQuickItem that displays a native Vulkan image
- Metal-based 3D rendering as a scene underlay
- Implementing a custom QQuickItem that displays a native Metal texture
- Direct3D 11-based rendering as a scene underlay
- OpenGL-based rendering as a scene underlay
- Redirecting Qt Quick rendering into an OpenGL texture
- Redirecting Qt Quick rendering into a Direct 3D texture

Adding Qt Quick scenes in QWidget applications

- Using QQuickWidget
- QQuickWidget - QQuickView Comparison (OpenGL)
- Embedding a QQuickView as Native Window

Qt Quick for Android

- Qt Quick for Android Studio Projects
- Exposing QtAbstractListModel to QML
- Using QtAbstractItemModel in Android Studio Projects

Upgrading from Qt 5 ◦ QML Dynamic View Ordering Tutorial