🎓 الدرس 37 من Tkinter: التعامل مع Frame لتقسيم الواجهة

🎯 الهدف أن تتعلم كيفية:

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

---

🧩 ما هو الـ Frame؟

هو عنصر يشبه الصندوق أو القسم داخل النافذة، يُستخدم لتجميع عناصر متعددة داخله مثل الأزرار والنصوص والنماذج، لتنسيق أفضل.

---

✅ مثال عملي: تقسيم الواجهة إلى قسمين

import tkinter as tk

# نافذة التطبيق
window = tk.Tk()
window.title("مثال على Frame")
window.geometry("400x300")

# إنشاء الإطار العلوي
top_frame = tk.Frame(window, bg="lightblue", height=100)
top_frame.pack(fill="x")

# عناصر في الإطار العلوي
tk.Label(top_frame, text="الإطار العلوي", bg="lightblue", font=("Arial", 14)).pack(pady=20)

# إنشاء الإطار السفلي
bottom_frame = tk.Frame(window, bg="lightgray")
bottom_frame.pack(fill="both", expand=True)

# عناصر في الإطار السفلي
tk.Label(bottom_frame, text="الإطار السفلي", bg="lightgray", font=("Arial", 12)).pack(pady=10)
tk.Button(bottom_frame, text="زر 1").pack(pady=5)
tk.Button(bottom_frame, text="زر 2").pack(pady=5)

window.mainloop()

---

🧠 شرح سريع:

العنصر	الوصف
Frame()	إنشاء إطار فرعي داخل النافذة الرئيسية.
pack()	تحديد مكان الإطار داخل النافذة.
fill="x" أو fill="both"	جعل الإطار يمتد أفقياً أو عمودياً أو كليهما.
expand=True	يسمح للإطار بأخذ أكبر مساحة ممكنة.

---

🛠 استخدامات Frame:

• تقسيم الصفحة إلى أقسام: رأس، جسم، تذييل.
• تجميع الحقول في نماذج إدخال البيانات.
• إنشاء شريط جانبي أو علوي للقائمة.

---

✅ التمرين: تصميم واجهة مقسّمة إلى رأس ومحتوى وتذييل باستخدام Frame

🎯 المطلوب:

• أن تنشئ نافذة تحتوي على 3 أقسام:
  • رأس (Header) بلون أزرق فيه عنوان.
  • محتوى (Content) رمادي فيه نص وزر.
  • تذييل (Footer) بلون غامق فيه ملاحظة بسيطة.

---

✅ الحل:

import tkinter as tk

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

# ----- الإطار العلوي (Header) -----
header = tk.Frame(window, bg="#1e90ff", height=60)
header.pack(fill="x")

tk.Label(header, text="واجهة بتقسيم الإطارات", bg="#1e90ff", fg="white", font=("Arial", 16)).pack(pady=15)

# ----- الإطار الأوسط (المحتوى) -----
content = tk.Frame(window, bg="#f0f0f0")
content.pack(fill="both", expand=True)

tk.Label(content, text="هذا هو محتوى الصفحة.", bg="#f0f0f0", font=("Arial", 12)).pack(pady=10)
tk.Button(content, text="زر مثال").pack(pady=10)

# ----- الإطار السفلي (Footer) -----
footer = tk.Frame(window, bg="#333", height=40)
footer.pack(fill="x")

tk.Label(footer, text="جميع الحقوق محفوظة © 2025", bg="#333", fg="white", font=("Arial", 10)).pack(pady=10)

window.mainloop()

---

🧠 شرح سريع:

العنصر	الغرض
header	يحوي العنوان الرئيسي، بلون أزرق.
content	يحتوي على عناصر الواجهة الرئيسية.
footer	تذييل الصفحة، لون داكن ومحتوى بسيط.
fill="x" و fill="both"	لجعل الإطارات تمتد وتملأ المساحة المناسبة.