🟢 الدرس الثاني: إضافة النصوص Labels والتعامل معها في PyQt Designer

في الدرس السابق أنشأنا نافذة بسيطة تحتوي على زر واحد فقط. اليوم سنتعلم كيفية إضافة التسميات Labels (النصوص الثابتة) والتعامل معها.

---

ما هو الـ Label؟

الـ QLabel هو عنصر يُستخدم لعرض نص أو صورة ثابتة داخل واجهة المستخدم.
يمكن أن نستخدمه مثلًا:

• لعرض عنوان البرنامج.
• لعرض وصف أو إرشادات.
• لعرض صورة شعار أو أيقونة.

---

خطوات العمل باستخدام Designer

1️⃣ إنشاء نافذة جديدة

• افتح Qt Designer.
• اختر Main Window أو Dialog with Buttons Bottom.

2️⃣ إضافة Label

• من Widget Box (القائمة على اليسار) اسحب عنصر Label وضعه في منتصف النافذة.
• اضغط عليه مرتين لتغيير النص من:

TextLabel

إلى:

مرحبًا بك في أول برنامج PyQt Designer

3️⃣ تنسيق النص

• من Property Editor (القائمة على اليمين) يمكنك تغيير:

font → لاختيار حجم ولون الخط.
alignment → لتوسيط النص.
wordWrap → لكسر النص إذا كان طويلًا.

4️⃣ إضافة زر مع التسمية

• اسحب Push Button وضعه تحت التسمية.
• غيّر نص الزر إلى:

إغلاق

5️⃣ حفظ وتحويل الكود

احفظ الملف باسم:

label_app.ui

ثم حوّله إلى بايثون:

pyuic5 -x label_app.ui -o label_app.py

وشغّل البرنامج:

python label_app.py

---

النتيجة 🎉

ستظهر نافذة تحتوي على نص ترحيبي وزر إغلاق.

---

📝 تمرين مع الحل – QLabel في PyQt Designer

التمرين:

أنشئ نافذة تحتوي على:

• 3 تسميات (Labels):

العنوان: "تطبيق PyQt Designer".
الوصف: "هذا مثال بسيط باستخدام QLabel".
التوقيع: "© تقنيات نور التعليمية".

• زر خروج يقوم بإغلاق التطبيق.

---

الحل خطوة بخطوة

1️⃣ التصميم بالـ Designer

• افتح Qt Designer.
• أضف 3 عناصر QLabel وزر QPushButton.
• غيّر النصوص كما في المطلوب.
• احفظ الملف باسم:

exercise_label.ui

---

2️⃣ تحويل ملف الواجهة إلى بايثون

اكتب في الطرفية (Terminal):

pyuic5 -x exercise_label.ui -o exercise_label.py

---

3️⃣ الكود النهائي (exercise_label.py)

بعد التحويل، يمكنك التعديل على الكود لإضافة وظيفة زر الخروج:

import sys
from PyQt5 import QtWidgets
from exercise_label import Ui_MainWindow  # هذا يأتي من ملف .ui المحوّل

class MyApp(QtWidgets.QMainWindow, Ui_MainWindow):
    def __init__(self):
        super().__init__()
        self.setupUi(self)

        # ربط زر الخروج مع إغلاق البرنامج
        self.pushButton.clicked.connect(self.close)

if __name__ == "__main__":
    app = QtWidgets.QApplication(sys.argv)
    window = MyApp()
    window.show()
    sys.exit(app.exec_())

---

النتيجة 🎉

عند تشغيل البرنامج، ستظهر نافذة فيها:

• العنوان في الأعلى.
• وصف في الوسط.
• توقيع الحقوق في الأسفل.
• زر "خروج" يغلق التطبيق.

---

🔜 في الدرس الثالث:
سنتعلم كيفية إضافة حقول الإدخال (QLineEdit) والتعامل معها داخل Designer.