🟢 الدرس الثالث: إضافة الأزرار وحقول الإدخال والتسميات في PyQt Designer

في هذا الدرس سنتعلم كيف ننشئ نموذج إدخال بيانات بسيط باستخدام أدوات PyQt Designer. سنستخدم فيه العناصر الأساسية مثل:

• QLabel لعرض النصوص.
• QLineEdit لإدخال البيانات.
• QPushButton لتنفيذ الأوامر.

---

إنشاء النموذج

أولاً افتح برنامج Qt Designer وقم بإنشاء نافذة جديدة من نوع Dialog أو Main Window. بعد ذلك أضف العناصر التالية:

1. ضع QLabel واكتب فيه: "أدخل اسمك:".
2. أضف أسفله QLineEdit ليتم إدخال الاسم فيه.
3. أضف زر QPushButton وغير نصه إلى "عرض الترحيب".
4. أضف QLabel آخر فارغ لعرض رسالة الترحيب لاحقاً.

بعد الانتهاء احفظ الملف باسم:

form_app.ui

---

تحويل الواجهة إلى كود بايثون

بعد حفظ الملف نحتاج إلى تحويله إلى كود بايثون باستخدام الأمر التالي في سطر الأوامر:

pyuic5 -x form_app.ui -o form_app.py

---

التمرين

المطلوب هو كتابة برنامج يطلب من المستخدم إدخال اسمه في الحقل المخصص، وعند الضغط على زر "عرض الترحيب" يظهر النص:

مرحبًا يا [اسم المستخدم]!

---

الحل

إليك الكود النهائي بعد تعديل الملف المحوّل من Qt Designer:

import sys
from PyQt5 import QtWidgets
from form_app import Ui_Dialog  # هذا الملف تم توليده من .ui

class MyForm(QtWidgets.QDialog, Ui_Dialog):
    def __init__(self):
        super().__init__()
        self.setupUi(self)

        # ربط الزر مع دالة الترحيب
        self.pushButton.clicked.connect(self.show_message)

    def show_message(self):
        # الحصول على النص من QLineEdit
        name = self.lineEdit.text()
        # عرض رسالة الترحيب في QLabel
        self.label_2.setText(f"مرحبًا يا {name}!")

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

---

النتيجة

بعد تشغيل البرنامج ستظهر نافذة تحتوي على حقل لإدخال الاسم وزر لعرض الترحيب. عند كتابة اسمك والضغط على الزر سيظهر النص "مرحبًا يا [اسمك]!" داخل الـ QLabel الثاني.

---

🔜 في الدرس الرابع سنتعلم كيفية استخدام Layouts لترتيب العناصر وجعل التصميم متجاوبًا بشكل احترافي.