QSlider & QProgressBarالدرس 14: سنتعلم

في هذا الدرس سنتعلم التحكم بالقيم باستخدام شريط التمرير (QSlider) وربطه مع شريط التقدم (QProgressBar).

شرح سريع

• QSlider: يسمح للمستخدم باختيار قيمة ضمن مدى (مثلاً من 0 إلى 100) عبر سحب المؤشر.
• QProgressBar: يُستخدم لعرض نسبة تقدم عملية معينة.

مثال عملي

import sys
from PyQt5.QtWidgets import QApplication, QWidget, QVBoxLayout, QSlider, QProgressBar
from PyQt5.QtCore import Qt

class SliderDemo(QWidget):
    def __init__(self):
        super().__init__()
        self.setWindowTitle("مثال QSlider و QProgressBar")
        self.setGeometry(200, 200, 300, 150)

        layout = QVBoxLayout()

        # شريط التمرير
        self.slider = QSlider(Qt.Horizontal)
        self.slider.setMinimum(0)
        self.slider.setMaximum(100)
        self.slider.setValue(50)

        # شريط التقدم
        self.progress = QProgressBar()
        self.progress.setMinimum(0)
        self.progress.setMaximum(100)
        self.progress.setValue(50)

        # ربط التمرير بالقيمة
        self.slider.valueChanged.connect(self.progress.setValue)

        layout.addWidget(self.slider)
        layout.addWidget(self.progress)

        self.setLayout(layout)

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

ماذا يحدث هنا؟

• QSlider يبدأ من 0 حتى 100.
• عند تحريك شريط التمرير يتم تحديث قيمة QProgressBar مباشرة.

---

📝 تمرين تطبيقي

⬅️ أنشئ برنامج يحتوي على:

1. QSlider عمودي (من 0 إلى 200).
2. QProgressBar أفقي مرتبط بالـ Slider.
3. اجعل القيمة الابتدائية للـ Slider = 120.

✅ الحل المقترح

import sys
from PyQt5.QtWidgets import QApplication, QWidget, QVBoxLayout, QSlider, QProgressBar
from PyQt5.QtCore import Qt

class CustomSlider(QWidget):
    def __init__(self):
        super().__init__()
        self.setWindowTitle("تمرين QSlider")
        self.setGeometry(200, 200, 300, 200)

        layout = QVBoxLayout()

        # Slider عمودي
        self.slider = QSlider(Qt.Vertical)
        self.slider.setMinimum(0)
        self.slider.setMaximum(200)
        self.slider.setValue(120)

        # ProgressBar أفقي
        self.progress = QProgressBar()
        self.progress.setMinimum(0)
        self.progress.setMaximum(200)
        self.progress.setValue(120)

        # ربط القيمة
        self.slider.valueChanged.connect(self.progress.setValue)

        layout.addWidget(self.slider)
        layout.addWidget(self.progress)

        self.setLayout(layout)

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

---

📌 ملاحظات هامة:

• يمكن جعل الـ Slider أفقي أو عمودي باستخدام Qt.Horizontal أو Qt.Vertical.
• يمكن تخصيص شريط التقدم ليظهر نص النسبة أو أن يكون فارغًا.
• الربط بين الأدوات يتم غالبًا باستخدام valueChanged.connect().