🔟 الدرس العاشر: استخدام QSpinBox و QDoubleSpinBox لإدخال الأعداد

في هذا الدرس سنتعلم كيف نستخدم QSpinBox لإدخال الأعداد الصحيحة، و QDoubleSpinBox لإدخال الأعداد العشرية.

كلاهما يعرضان مربعًا مع أسهم صغيرة يمكن من خلالها زيادة أو تقليل الرقم، كما يمكن للمستخدم كتابة الرقم مباشرة.

---

1️⃣ ما هو QSpinBox؟

• يستخدم لإدخال أعداد صحيحة.
• يمكنك تحديد الحد الأدنى والحد الأقصى والقيمة الابتدائية.
• مثال: إدخال العمر من 1 إلى 100.

2️⃣ ما هو QDoubleSpinBox؟

• مشابه تمامًا لـ QSpinBox لكن يدعم الأعداد العشرية.
• يمكنك تحديد عدد المنازل العشرية.
• مثال: إدخال الوزن (مثل 65.5 كجم).

---

3️⃣ مثال عملي

import sys
from PyQt5.QtWidgets import QApplication, QWidget, QVBoxLayout, QLabel, QSpinBox, QDoubleSpinBox

class SpinBoxExample(QWidget):
    def __init__(self):
        super().__init__()
        self.setWindowTitle("مثال على QSpinBox و QDoubleSpinBox")
        self.setGeometry(100, 100, 300, 200)

        layout = QVBoxLayout()

        # QSpinBox لإدخال العمر
        self.label_age = QLabel("العمر: ")
        self.spin_age = QSpinBox()
        self.spin_age.setRange(1, 100)   # من 1 إلى 100
        self.spin_age.setValue(20)       # القيمة الابتدائية
        self.spin_age.valueChanged.connect(self.update_age)

        # QDoubleSpinBox لإدخال الوزن
        self.label_weight = QLabel("الوزن: ")
        self.spin_weight = QDoubleSpinBox()
        self.spin_weight.setRange(30.0, 200.0)  # من 30.0 إلى 200.0
        self.spin_weight.setValue(70.5)         # القيمة الابتدائية
        self.spin_weight.setDecimals(1)         # منزلة عشرية واحدة
        self.spin_weight.setSingleStep(0.5)     # خطوة التغيير
        self.spin_weight.valueChanged.connect(self.update_weight)

        # إضافة العناصر إلى الواجهة
        layout.addWidget(self.label_age)
        layout.addWidget(self.spin_age)
        layout.addWidget(self.label_weight)
        layout.addWidget(self.spin_weight)

        self.setLayout(layout)

    def update_age(self, value):
        self.label_age.setText(f"العمر: {value} سنة")

    def update_weight(self, value):
        self.label_weight.setText(f"الوزن: {value} كجم")


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

---

4️⃣ ماذا يحدث هنا؟

• QSpinBox يتحكم في العمر (بين 1 و 100).
• QDoubleSpinBox يتحكم في الوزن (بين 30.0 و 200.0).
• عند تغيير القيمة، يتم تحديث النصوص بجانبها تلقائيًا.

---

🎯 تمرين لك

اصنع برنامجًا يحتوي على:

1. QSpinBox لاختيار عدد التذاكر (من 1 إلى 10).
2. QDoubleSpinBox لاختيار سعر التذكرة (من 5.0 إلى 50.0).
3. زر (QPushButton) عند الضغط عليه يحسب الإجمالي ويعرضه في QLabel.

---

✅ حل التمرين: حساب تكلفة التذاكر باستخدام QSpinBox و QDoubleSpinBox

import sys
from PyQt5.QtWidgets import QApplication, QWidget, QVBoxLayout, QLabel, QSpinBox, QDoubleSpinBox, QPushButton

class TicketCalculator(QWidget):
    def __init__(self):
        super().__init__()
        self.setWindowTitle("حاسبة التذاكر")
        self.setGeometry(100, 100, 300, 200)

        layout = QVBoxLayout()

        # QSpinBox لعدد التذاكر
        self.label_tickets = QLabel("عدد التذاكر: ")
        self.spin_tickets = QSpinBox()
        self.spin_tickets.setRange(1, 10)  # من 1 إلى 10
        self.spin_tickets.setValue(1)

        # QDoubleSpinBox لسعر التذكرة
        self.label_price = QLabel("سعر التذكرة: ")
        self.spin_price = QDoubleSpinBox()
        self.spin_price.setRange(5.0, 50.0)   # من 5.0 إلى 50.0
        self.spin_price.setDecimals(2)        # منزلتين عشريتين
        self.spin_price.setValue(10.0)        # القيمة الابتدائية
        self.spin_price.setSingleStep(0.5)    # خطوة الزيادة 0.5

        # زر لحساب الإجمالي
        self.btn_calc = QPushButton("احسب الإجمالي")
        self.btn_calc.clicked.connect(self.calculate_total)

        # النتيجة
        self.label_result = QLabel("الإجمالي: 0.00")

        # إضافة العناصر إلى الواجهة
        layout.addWidget(self.label_tickets)
        layout.addWidget(self.spin_tickets)
        layout.addWidget(self.label_price)
        layout.addWidget(self.spin_price)
        layout.addWidget(self.btn_calc)
        layout.addWidget(self.label_result)

        self.setLayout(layout)

    def calculate_total(self):
        tickets = self.spin_tickets.value()
        price = self.spin_price.value()
        total = tickets * price
        self.label_result.setText(f"الإجمالي: {total:.2f} ريال")


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

---

📌 شرح سريع:

• QSpinBox يحدد عدد التذاكر (١ إلى ١٠).
• QDoubleSpinBox يحدد سعر التذكرة (٥.٠ إلى ٥٠.٠).
• عند الضغط على الزر "احسب الإجمالي"، يتم ضرب العدد في السعر ويُعرض الناتج في QLabel.

---

✅ حل التمرين مع تنسيق النتيجة بالألوان

import sys
from PyQt5.QtWidgets import QApplication, QWidget, QVBoxLayout, QLabel, QSpinBox, QDoubleSpinBox, QPushButton
from PyQt5.QtGui import QFont, QColor

class TicketCalculator(QWidget):
    def __init__(self):
        super().__init__()
        self.setWindowTitle("حاسبة التذاكر")
        self.setGeometry(100, 100, 320, 220)

        layout = QVBoxLayout()

        # QSpinBox لعدد التذاكر
        self.label_tickets = QLabel("عدد التذاكر:")
        self.spin_tickets = QSpinBox()
        self.spin_tickets.setRange(1, 10)
        self.spin_tickets.setValue(1)

        # QDoubleSpinBox لسعر التذكرة
        self.label_price = QLabel("سعر التذكرة:")
        self.spin_price = QDoubleSpinBox()
        self.spin_price.setRange(5.0, 50.0)
        self.spin_price.setDecimals(2)
        self.spin_price.setValue(10.0)
        self.spin_price.setSingleStep(0.5)

        # زر لحساب الإجمالي
        self.btn_calc = QPushButton("💰 احسب الإجمالي")
        self.btn_calc.setStyleSheet("background-color: #0078D7; color: white; font-weight: bold; border-radius: 8px; padding: 6px;")
        self.btn_calc.clicked.connect(self.calculate_total)

        # النتيجة
        self.label_result = QLabel("الإجمالي: 0.00 ريال")
        self.label_result.setFont(QFont("Arial", 12, QFont.Bold))
        self.label_result.setStyleSheet("color: #444;")

        # إضافة العناصر إلى الواجهة
        layout.addWidget(self.label_tickets)
        layout.addWidget(self.spin_tickets)
        layout.addWidget(self.label_price)
        layout.addWidget(self.spin_price)
        layout.addWidget(self.btn_calc)
        layout.addWidget(self.label_result)

        self.setLayout(layout)

    def calculate_total(self):
        tickets = self.spin_tickets.value()
        price = self.spin_price.value()
        total = tickets * price
        # عرض النتيجة باللون الأخضر
        self.label_result.setText(f"الإجمالي: {total:.2f} ريال")
        self.label_result.setStyleSheet("color: green; font-size: 14px; font-weight: bold;")


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

---

✨ الإضافات:

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

---

✅ نسخة مطورة مع QFrame لعرض النتيجة

import sys
from PyQt5.QtWidgets import QApplication, QWidget, QVBoxLayout, QLabel, QSpinBox, QDoubleSpinBox, QPushButton, QFrame
from PyQt5.QtGui import QFont

class TicketCalculator(QWidget):
    def __init__(self):
        super().__init__()
        self.setWindowTitle("حاسبة التذاكر")
        self.setGeometry(100, 100, 350, 250)

        layout = QVBoxLayout()

        # QSpinBox لعدد التذاكر
        self.label_tickets = QLabel("عدد التذاكر:")
        self.spin_tickets = QSpinBox()
        self.spin_tickets.setRange(1, 10)
        self.spin_tickets.setValue(1)

        # QDoubleSpinBox لسعر التذكرة
        self.label_price = QLabel("سعر التذكرة:")
        self.spin_price = QDoubleSpinBox()
        self.spin_price.setRange(5.0, 50.0)
        self.spin_price.setDecimals(2)
        self.spin_price.setValue(10.0)
        self.spin_price.setSingleStep(0.5)

        # زر لحساب الإجمالي
        self.btn_calc = QPushButton("💰 احسب الإجمالي")
        self.btn_calc.setStyleSheet("""
            QPushButton {
                background-color: #0078D7;
                color: white;
                font-weight: bold;
                border-radius: 8px;
                padding: 8px;
            }
            QPushButton:hover {
                background-color: #005a9e;
            }
        """)
        self.btn_calc.clicked.connect(self.calculate_total)

        # QFrame لعرض النتيجة
        self.result_frame = QFrame()
        self.result_frame.setFrameShape(QFrame.Box)
        self.result_frame.setStyleSheet("background-color: #f9f9f9; border: 2px solid #0078D7; border-radius: 8px;")
        self.result_label = QLabel("الإجمالي: 0.00 ريال")
        self.result_label.setFont(QFont("Arial", 14, QFont.Bold))
        self.result_label.setStyleSheet("color: #444; padding: 8px;")
        frame_layout = QVBoxLayout()
        frame_layout.addWidget(self.result_label)
        self.result_frame.setLayout(frame_layout)

        # إضافة العناصر إلى الواجهة
        layout.addWidget(self.label_tickets)
        layout.addWidget(self.spin_tickets)
        layout.addWidget(self.label_price)
        layout.addWidget(self.spin_price)
        layout.addWidget(self.btn_calc)
        layout.addWidget(self.result_frame)

        self.setLayout(layout)

    def calculate_total(self):
        tickets = self.spin_tickets.value()
        price = self.spin_price.value()
        total = tickets * price
        # عرض النتيجة داخل QFrame باللون الأخضر
        self.result_label.setText(f"الإجمالي: {total:.2f} ريال")
        self.result_label.setStyleSheet("color: green; font-size: 16px; font-weight: bold; padding: 8px;")


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

---

✨ المميزات الجديدة:

• النتيجة تظهر داخل مربع أنيق QFrame بخلفية فاتحة وحد أزرق.
• زر الحساب أصبح يتغير لونه عند المرور بالماوس (Hover Effect).
• النتيجة تظهر باللون الأخضر داخل المربع، مثل شاشة آلة حاسبة.