🟢 الدرس الرابع: استخدام الـ Layouts في PyQt Designer

في الدروس السابقة تعلمنا كيفية إضافة العناصر مثل الأزرار، التسميات، وحقول الإدخال. ولكن إذا لاحظت عند تكبير أو تصغير النافذة فإن العناصر لا تبقى مرتبة بشكل جيد، وقد تتحرك بشكل غير متناسق. هنا يأتي دور Layouts.

---

ما هو الـ Layout؟

الـ Layout هو أداة تُستخدم لترتيب العناصر داخل النافذة بشكل منظم ومرن. عند تكبير أو تصغير النافذة يقوم الـ Layout بإعادة توزيع العناصر تلقائياً بحيث تبقى واجهة المستخدم جميلة ومتناسقة.

---

أنواع الـ Layouts في PyQt Designer

1. Vertical Layout: يوزع العناصر بشكل عمودي فوق بعضها.
2. Horizontal Layout: يوزع العناصر بشكل أفقي بجانب بعضها.
3. Grid Layout: يوزع العناصر داخل شبكة (صفوف وأعمدة).
4. Form Layout: مثالي للنماذج، حيث يحتوي على عمودين (الأول للتسميات، والثاني لحقول الإدخال).

---

خطوات التطبيق

1- افتح Qt Designer وقم بإنشاء نافذة جديدة.

2- أضف عدة عناصر مثل:

• QLabel لكتابة "اسم المستخدم".
• QLineEdit لإدخال الاسم.
• QLabel أخرى لكتابة "كلمة المرور".
• QLineEdit أخرى لإدخال كلمة المرور.
• زر QPushButton بعنوان "تسجيل الدخول".

3- حدد العناصر جميعها واضغط بزر الفأرة الأيمن، ثم اختر Lay Out in a Form Layout.
4- الآن ستلاحظ أن العناصر أصبحت مرتبة بشكل منسق داخل نموذج إدخال بيانات.

---

حفظ وتحويل الكود

بعد ترتيب العناصر، احفظ الملف باسم:

layout_app.ui

ثم حوّله إلى بايثون باستخدام:

pyuic5 -x layout_app.ui -o layout_app.py

---

التمرين

صمّم نافذة تحتوي على:

• حقل لإدخال الاسم.
• حقل لإدخال البريد الإلكتروني.
• زر بعنوان "حفظ البيانات".

رتب هذه العناصر باستخدام Form Layout بحيث يكون الشكل مثل النماذج الاحترافية.

---

الحل

إليك الكود بعد تعديل الملف الناتج من Qt Designer:

import sys
from PyQt5 import QtWidgets
from layout_app import Ui_Dialog  # الملف الناتج من .ui

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

        # ربط زر الحفظ مع دالة خاصة
        self.pushButton.clicked.connect(self.save_data)

    def save_data(self):
        name = self.lineEdit.text()
        email = self.lineEdit_2.text()
        QtWidgets.QMessageBox.information(self, "تم الحفظ", f"الاسم: {name}\nالبريد: {email}")

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

---

النتيجة

ستظهر نافذة تحتوي على حقول اسم وبريد إلكتروني مرتبة بشكل جميل باستخدام Form Layout، وعند إدخال البيانات والضغط على زر "حفظ البيانات" ستظهر رسالة منبثقة تحتوي على ما أدخله المستخدم.

---

🔜 في الدرس الخامس سنتعلم كيفية حفظ واجهة Designer في ملف .ui وربطها مباشرة داخل كود بايثون بدون تحويل.