🎓 الدرس 35 من Tkinter: إضافة أشرطة التمرير Scrollbar إلى الواجهات

Tamer Ahmed يوليو 04, 2025

🎯 الهدف من هذا الدرس:

  • استخدام شريط التمرير الرأسي أو الأفقي.
  • ربطه بعناصر مثل Text أو Canvas.
  • التعامل مع المحتوى القابل للتمرير (Scrollable content).
🎓 الدرس 35 من Tkinter: إضافة أشرطة التمرير Scrollbar إلى الواجهات

✅ متى نحتاج Scrollbar؟

عندما يكون لدينا محتوى:

  • أطول من حجم النافذة (نصوص كثيرة – صور – رسومات).
  • أو عند استخدام قوائم/نصوص داخل إطارات.

✅ مثال 1: Scrollbar مع عنصر Text

import tkinter as tk

# إنشاء النافذة
window = tk.Tk()
window.title("مثال على Scrollbar مع Text")
window.geometry("400x300")

# عنصر Text كبير
text_area = tk.Text(window, wrap="word", width=40, height=10)
text_area.pack(side="left", fill="both", expand=True)

# شريط تمرير رأسي
scroll = tk.Scrollbar(window, command=text_area.yview)
scroll.pack(side="right", fill="y")

# ربط الشريط بمنطقة النص
text_area.config(yscrollcommand=scroll.set)

# ملء النص بمحتوى طويل
for i in range(50):
    text_area.insert("end", f"هذا السطر رقم {i+1}\n")

window.mainloop()

✅ شرح سريع:

العنصر الوظيفة
Scrollbar() إنشاء شريط التمرير
command=text.yview ربط الشريط بعنصر Text
text.config(yscrollcommand=scroll.set) ربط النص بتحديث موضع الشريط

✅ مثال 2: Scrollbar أفقي مع Canvas

canvas = tk.Canvas(window, width=300, height=150)
canvas.pack()

scroll_x = tk.Scrollbar(window, orient="horizontal", command=canvas.xview)
scroll_x.pack(side="bottom", fill="x")

canvas.config(xscrollcommand=scroll_x.set, scrollregion=(0, 0, 800, 200))

❗ الـ scrollregion يحدد المساحة الداخلية القابلة للتمرير داخل الـ Canvas.

🧠 ملاحظات:

  • الشريط الأفقي: orient="horizontal"
  • الشريط الرأسي: افتراضي أو orient="vertical"
  • يمكن استخدام كلا الشريطين في نفس الوقت مع عناصر معقدة.

✅ التمرين: إنشاء واجهة تحتوي على Text و Scrollbar رأسي لعرض محتوى طويل

🎯 المطلوب:

  • أن تنشئ نافذة تحتوي على عنصر Text.
  • أن تضيف شريط تمرير رأسي يظهر عندما يكون النص أطول من منطقة العرض.
  • أن تملأ النص تلقائيًا بـ 100 سطر.

🧾 الحل الكامل:

import tkinter as tk

# إنشاء النافذة
window = tk.Tk()
window.title("تمرين: Scrollbar مع Text")
window.geometry("400x300")

# إنشاء إطار لتجميع النص والشريط
frame = tk.Frame(window)
frame.pack(fill="both", expand=True)

# عنصر النص
text_area = tk.Text(frame, wrap="word", font=("Arial", 12))
text_area.pack(side="left", fill="both", expand=True)

# شريط التمرير الرأسي
scrollbar = tk.Scrollbar(frame, command=text_area.yview)
scrollbar.pack(side="right", fill="y")

# ربط الشريط بعنصر النص
text_area.config(yscrollcommand=scrollbar.set)

# إدخال 100 سطر تلقائيًا
for i in range(1, 101):
    text_area.insert("end", f"السطر رقم {i}\n")

window.mainloop()

✅ شرح سريع:

السطر الوظيفة
Text() عنصر لكتابة أو عرض نصوص متعددة
Scrollbar() إنشاء شريط تمرير
yscrollcommand=scrollbar.set ربط التمرير تلقائيًا بتغيير موقع النص
command=text_area.yview يجعل الشريط يتحكم في تمرير محتوى النص

🧠 ملاحظات إضافية:

  • يمكنك استخدام text_area.insert("end", نص) لإضافة المحتوى ديناميكيًا.
  • تغيير wrap="word" إلى "char" يجعل النص يلتف بعد كل حرف.

إرسال تعليق

0 تعليقات