Learn Qt Quick (QML) and C++ from beginner to advanced with over 150+ mini-projects — each designed to teach a specific concept of GUI, logic and backend integration.
This collection is ideal for developers who want to master Qt/QML app development, explore real-world examples and build a solid foundation in modern C++ with Qt Quick.
- 150+ QML and C++ examples
- Learn from beginner to advanced concepts
- Explore real-world use cases:
- GUI animations and transitions
- Camera and media handling
- Database connection (SQLite & others)
- Authentication and login systems
- Date and time manipulation
- Interactive calculator and converters
- Multi-step forms and workflows
- Mini-games built with QML
- Mouse event handling (left/right click)
- Alarms, timers, and counters
- Table views and data formatting
- Modern app design and styling
- Text formatting and rich input
- Weather app using API
- System/computer information retrieval
- And many more practical examples...
| Component | Description |
|---|---|
| Framework | Qt 6 |
| Frontend | QML (Qt Quick) |
| Backend | Modern C++ (C++17 or later) |
| Database | SQLite / MySQL |
| Build System | CMake / qmake |
| IDE | Qt Creator |
| Supported Platforms | Windows, Linux, macOS |
git clone https://github.com/iamx-ariful-islam/Qml-and-Cpp.git
cd Qml-and-Cpp- Launch Qt Creator
- Click File → Open File or Project
- Select a project folder (e.g., QtQuickContactList)
- Click the Run
▶️ button in Qt Creator to launch your selected project.
- Qt 6+
- C++17 or later
- Qt Creator IDE
Here’s the structure of the Qml and Cpp project:
Qml-And-Cpp/
│
├── Projects/
├── Screenshots/
├── LICENSE
└── README.mdHere are some screenshots of the Qml and Cpp project:
About Page
Age Calculator_1
Age Calculator_2
Alarms_1
Alarms_2
Animated Login_1
Animated Login_2
Animated Search Bar
Animated TabBar
Basic_1
Basic_2
Bottom Navbar Show Hide_1
Bottom Navbar Show Hide_2
Button Click Animation
Button Icon_1
Button Icon_2
Calculator Example
Calendar
Calendar Event Design_1
Calendar Event Design_2
Calendar Event Design_3
Camera Photo
Canvas Example
Canvas Paint_1
Canvas Paint_2
Capitalize First Letter
Color Dialog
Color Gradient
Connecting RegisterType_1
Connecting RegisterType_2
Connecting Using Context Properties_1
Connecting Using Context Properties_2
Contact List
Cool Button Example_1
Cool Button Example_2
Cpp Function Call
Curvy Background
Curvy Background2
Curvy Background3
Custom Button
Custom Check Box
Custom Combo Box
Custom Dialog_1
Custom Dialog_2
Custom Expander
Custom Expander Menubar
Custom Items
Custom Notification
Custom Search Field
Custom Text Field Windows
Custom ToolTip
Dark Light Mode_1
Dark Light Mode_2
Dashboard Image Label Design
Dashboard Label Design
Desktop Dashboard_1
Desktop Dashboard_2
Desktop Tip Calculator
Dial
Digital Clock
Double Click Event_1
Double Click Event_2
Drag And Drop_1
Drag And Drop_2
Drag Drop
Drop Down Menu
Dynamic Object_1
Dynamic Object_2
File Create By Button Click
File Dialog
Flickable Example
Flickable Zoomable Image
Frame
Frameless Window
Frameless Window2
Github Login Desktop
Greeting Message
GridView
GroupBox
Icon Label Switch
Image Opacity
Image Viewer
Info Page Design
Label Switch Design
Learn Page
ListView
ListView Example
Loading Animation
Login Page
Login Page Design_1
Login Page Design_2
Make Button
Menu Bar With Keyboard Shortcut
Menu Bar With Keyboard Shortcut2
Modern Login Page
Modern ToDo List
Mouse Event_1
Mouse Event_2
Mouse Event_3
Multi Step Form_1
Multi Step Form_2
Multi Step Form_3
Multi Step Form_4
Multi Step Form_5
Notification Note
Number Animation
Number Animation2
Number Animation3
Number Animation On Opacity
Number Generator
Number Guessing
Open Dialog Box_1
Open Dialog Box_2
Open Page_1
Open Page_2
Page Transition Animation
Password Generator
Player
Popup Login Page_1
Popup Login Page_2
Popup_1
Popup_2
Position
Primary Secondary Button Design
ProgressBar
QProperty Macro
Rectangle Design Image
Register Type
Repeater
Resizable And Dragable Rectangle
Right Click Option
Scrolling Text
Signals & Connection_1
Signals & Connection_2
Signals & Connection_3
Simple Button
Simple Sqlite User Info Project_1
Simple Sqlite User Info Project_2
Slider ProgessBar
Social Media Page
SpinBox
SplitView
SQLite Example
SQLite Example2
StackView Loader_1
StackView Loader_2
Stopwatch
Stopwatch2
Styling_1
Styling_2
SwipView_1
SwipView_2
Swip View_3
Switch
TabBar_1
TabBar_2
TabBar_3
Table
Table2
TableView
TableView2
TableView3
TextArea
TextField Integer Validator
Text Format
Tic Tac Toe
Timer
Timer Animation
Timer Tumbler
ToolBar
Top Bottom Bar
Tumbler
Version Animation
Vertical Tool Separator
Weather App
- 🪶 Lightweight and optimized examples
- 💻 Beginner to expert progression
- 🔌 Clean QML-C++ communication patterns
- 🧩 Reusable UI components
- 🗃️ Practical examples for real-world projects
- Understand QML fundamentals and C++ backend integration
- Learn signal-slot communication between QML and C++
- Create database-connected applications
- Build interactive and responsive UIs
- Develop desktop-grade apps with modern design
- Implement logic-driven components using C++
Contributions, suggestions, and feedback are always welcome! ❤️ To contribute:
- Fork the repository
- Create a new branch (
feature/new-feature) - Commit your changes
- Push and submit a Pull Request
💬 You can also open an issue if you’d like to discuss a feature or report a bug.
The MIT License (MIT)
“Good design is about making things simple yet significant”
— Ariful Islam