Skip to content

README.md

Latest commit

 

History

History
154 lines (113 loc) · 4.83 KB

README.md

File metadata and controls

154 lines (113 loc) · 4.83 KB
Raw

PySide6 GUI Development Course

🚀 PHASE 1: PySide6 Basics (No Qt Designer)

Lesson 1: Introduction to PySide6

🔹 Topics:

  • What is PySide6?
  • Installing PySide6
  • Understanding QApplication, QWidget, and exec()

💻 Code Example: Show a simple empty window
🎯 Exercise: Modify the window’s title and size

Lesson 2: Basic Widgets

🔹 Topics:

  • Adding buttons (QPushButton)
  • Adding labels (QLabel)
  • Adding text input (QLineEdit)

💻 Code Example: A basic form with a button, label, and text field
🎯 Exercise: Create a UI where a user types their name, and clicking a button displays it in a label

Lesson 3: Signals and Slots (Event Handling)

🔹 Topics:

  • What are signals and slots?
  • Connecting a button click (.clicked.connect())
  • Handling text changes (.textChanged.connect())

💻 Code Example: Clicking a button updates a label
🎯 Exercise: Create an app where clicking a button changes a label's text to "Hello, World!"

Lesson 4: Layouts (Positioning Widgets)

🔹 Topics:

  • Vertical Layout (QVBoxLayout)
  • Horizontal Layout (QHBoxLayout)
  • Grid Layout (QGridLayout)

💻 Code Example: Create a calculator layout using QGridLayout
🎯 Exercise: Arrange a form with a name field, age field, and submit button in a vertical layout

Lesson 5: Custom Widgets & Classes

🔹 Topics:

  • What is Object-Oriented Programming (OOP) in PySide6?
  • Creating custom widgets using Python classes
  • Overriding QWidget to make your own window class

💻 Code Example: Convert an existing window into a custom class
🎯 Exercise: Create a MyWindow class that displays a custom message

🚀 PHASE 2: Qt Designer (Drag-and-Drop UI)

Lesson 6: Introduction to Qt Designer

🔹 Topics:

  • What is Qt Designer?
  • How to install and open it
  • How to create a .ui file

💻 Code Example: Open Qt Designer, drag a button, and save the .ui file
🎯 Exercise: Create a simple form in Qt Designer with a label and button

Lesson 7: Converting .ui to Python Code

🔹 Topics:

  • Using pyside6-uic to convert .ui to .py
  • Loading a .ui file dynamically

💻 Code Example: Load a .ui file and display the window
🎯 Exercise: Modify the .ui file and see the changes in Python

Lesson 8: Connecting Signals in Qt Designer

🔹 Topics:

  • How to connect button clicks in Qt Designer
  • Using Python to handle UI events

💻 Code Example: Button in Qt Designer changes a label text
🎯 Exercise: Create an app where clicking a button displays "Hello, Qt Designer!"

🚀 PHASE 3: Combining PySide6 and Qt Designer

Lesson 9: Creating a Main Window (QMainWindow) in Qt Designer 🆕

🔹 Topics:

  • What is QMainWindow?
  • Adding menu bars, toolbars, and status bars using Qt Designer
  • Structuring a main application window

💻 Code Example: Load a .ui file with a menu bar
🎯 Exercise: Add a "File" menu with an "Exit" option that closes the app

Lesson 10: Integrating Qt Designer with Python Code

🔹 Topics:

  • Using Python to control Qt Designer elements
  • Accessing UI components from a .ui file

💻 Code Example: Change a label’s text when a button is clicked
🎯 Exercise: Create a login form with username and password fields

Lesson 11: Building a Complete GUI App

🔹 Topics:

  • Structuring a real project
  • Saving user data
  • Displaying pop-up messages

💻 Code Example: A To-Do List App with Qt Designer
🎯 Exercise: Add a "Clear List" button to reset the to-do list

🚀 PHASE 4: Advanced Topics (Optional)

Lesson 12: Working with Dialogs & Pop-ups

🔹 Topics:

  • Using QMessageBox for alerts
  • Creating custom pop-ups

💻 Code Example: Show a confirmation message before closing the app
🎯 Exercise: Create a pop-up message when clicking a button

Lesson 13: File Handling in PySide6

🔹 Topics:

  • Opening files (QFileDialog)
  • Saving text to a file

💻 Code Example: Open a .txt file and display its content
🎯 Exercise: Create a "Save As" button to save text

Lesson 14: Styling the UI with CSS

🔹 Topics:

  • Using Qt Stylesheets (setStyleSheet())
  • Customizing buttons and backgrounds

💻 Code Example: Change button colors dynamically
🎯 Exercise: Apply a dark theme to your UI

Lesson 15: Packaging the App

🔹 Topics:

  • Converting a PySide6 app into an EXE file
  • Using pyinstaller to distribute apps

💻 Code Example: Convert a simple app into an .exe
🎯 Exercise: Package your own project

🎯 Final Project

After all lessons, we’ll build a full PySide6 app (your choice):

  1. To-Do List App
  2. Simple Calculator
  3. Note-Taking App

You’ll use Qt Designer + PySide6 + your own logic to complete it! 🚀