QML Learning Project

A structured, hands-on guide to mastering QML (Qt Markup Language) and Qt Quick — from foundational concepts to advanced techniques.

📚 Project Overview

This repository contains:

• QML_Roadmap.md — A comprehensive learning roadmap organized into phases
• QMLBasics/ — Practical examples and code for Phase 1 (Foundations)
  • basicqml.md — QML syntax quick reference
  • Main.qml — Interactive example demonstrating core concepts
  • main.cpp — Qt application entry point
  • CMakeLists.txt — Build configuration

🎯 Learning Path

Phase 1: Foundations

• QML syntax & structure
• Basic types & elements (Rectangle, Text, Image, etc.)
• Property bindings & signals
• Positioning & layouts (anchors)

Get started: Run the QMLBasics example to see all Phase 1 concepts in action on one screen.

Phase 2+: Advanced Topics

Planned coverage includes Qt Quick Controls, advanced layouts, state management, animations, and more. See QML_Roadmap.md for the full roadmap.

🚀 Getting Started

Prerequisites

• Qt 6.x (or Qt 5.15+)
• CMake 3.16+
• A C++ compiler (MSVC, GCC, or Clang)
• Qt Creator (optional, but recommended)

Build & Run

# Clone the repository
git clone https://github.com/mahtab04/QML-Learning.git
cd QML-Learning

# Create build directory
mkdir build
cd build

# Configure with CMake
cmake ..

# Build
cmake --build .

# Run the application
./QMLBasics  # or QMLBasics.exe on Windows

Using Qt Creator

1. Open QMLBasics/CMakeLists.txt as a project in Qt Creator
2. Configure with your Qt kit
3. Press Ctrl+R to build and run

📖 How to Use This Repository

1. Read the roadmap (QML_Roadmap.md) to understand the learning structure
2. Review quick notes (QMLBasics/basicqml.md) for syntax reference
3. Run the example to see concepts in action
4. Modify the code — Change values, properties, and colors to experiment
5. Follow the practice exercises listed in basicqml.md

📝 Key Files

File	Purpose
QML_Roadmap.md	Complete learning roadmap (Phases 1-6)
QMLBasics/basicqml.md	QML syntax quick reference & practice guide
QMLBasics/Main.qml	Interactive QML example (all Phase 1 concepts)
QMLBasics/main.cpp	Qt application launcher
QMLBasics/CMakeLists.txt	Build configuration

🧪 Example Features (Phase 1)

The QMLBasics/Main.qml demonstrates:

• ✅ Basic Rectangle and Text elements
• ✅ Property bindings (dynamic sizing)
• ✅ Mouse interaction & signal handlers
• ✅ Anchor-based positioning
• ✅ Toggle state management with signals

🔗 Resources

• Qt Documentation
• QML Language Reference
• Qt Quick Controls

📌 Notes

• This project is organized for progressive learning — concepts build on previous phases
• Each example is kept minimal to focus on core concepts
• Comments in code explain what each section does and why
• Practice exercises encourage experimentation and deeper understanding

📄 License

MIT License — Feel free to use this for learning and teaching.

🤝 Contributing

Have improvements or additional examples? Feel free to fork and submit a pull request!

---

Happy Learning! 🎉 Start with Phase 1, run the examples, and explore the code.