🎓 الدرس 30 من Tkinter: استخدام Frame لتنظيم التخطيط

Tamer Ahmed يونيو 30, 2025

🎯 الهدف: تعلم كيفية استخدام عنصر Frame لتنظيم وتنسيق عناصر الواجهة داخل مجموعات، لتسهيل التحكم في التخطيط وتوزيع الأدوات.

🎓 الدرس 30 من Tkinter: استخدام Frame لتنظيم التخطيط

🧱 ما هو Frame؟

عنصر حاوية (Container) داخل نافذة Tkinter:

  • يُستخدم لتجميع عناصر متعددة في جزء معين من الشاشة.
  • يمكن تطبيق إعدادات منفصلة عليه (لون الخلفية، الهوامش، إلخ).
  • يُسهّل تقسيم الواجهة إلى أقسام.

✅ مثال عملي:

🎯 إنشاء نافذة فيها جزئين:

  • الجزء العلوي يحتوي على عنوان.
  • الجزء السفلي يحتوي على زرين.
import tkinter as tk

# إنشاء النافذة
window = tk.Tk()
window.title("استخدام Frame")
window.geometry("400x250")

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

title_label = tk.Label(top_frame, text="مرحبا بك في التطبيق", font=("Arial", 16), bg="lightblue")
title_label.pack(pady=30)

# --- الإطار السفلي (الأزرار) ---
bottom_frame = tk.Frame(window)
bottom_frame.pack(pady=30)

btn1 = tk.Button(bottom_frame, text="زر 1", width=10)
btn2 = tk.Button(bottom_frame, text="زر 2", width=10)

btn1.pack(side="left", padx=10)
btn2.pack(side="left", padx=10)

window.mainloop()

💡 الشرح:

العنصر الوظيفة
Frame(...) إنشاء إطار لتجميع العناصر
pack(fill="x") ملء العرض الأفقي للإطار
Label() داخل Frame يوضع العنصر داخل الإطار المحدد
side="left" ترتيب العناصر داخل الإطار أفقيًا

✅ متى أستخدم Frame؟

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

✅ التمرين: "تطبيق تسجيل دخول مقسم باستخدام Frames"

🎯 المطلوب:

صمّم واجهة تحتوي على:

  • عنوان في الأعلى داخل إطار علوي.
  • حقلي إدخال (اسم المستخدم + كلمة المرور) داخل إطار أوسط.
  • زر "تسجيل الدخول" داخل إطار سفلي.

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

import tkinter as tk

# إنشاء النافذة
window = tk.Tk()
window.title("نموذج تسجيل دخول")
window.geometry("400x250")

# --- الإطار العلوي ---
top_frame = tk.Frame(window, bg="#e0f7fa")
top_frame.pack(fill="x")

title = tk.Label(top_frame, text="تسجيل الدخول", font=("Arial", 16, "bold"), bg="#e0f7fa")
title.pack(pady=10)

# --- الإطار الأوسط ---
middle_frame = tk.Frame(window)
middle_frame.pack(pady=20)

# حقل اسم المستخدم
tk.Label(middle_frame, text="اسم المستخدم:").grid(row=0, column=0, padx=5, pady=5, sticky="e")
username_entry = tk.Entry(middle_frame)
username_entry.grid(row=0, column=1, padx=5, pady=5)

# حقل كلمة المرور
tk.Label(middle_frame, text="كلمة المرور:").grid(row=1, column=0, padx=5, pady=5, sticky="e")
password_entry = tk.Entry(middle_frame, show="*")
password_entry.grid(row=1, column=1, padx=5, pady=5)

# --- الإطار السفلي ---
bottom_frame = tk.Frame(window)
bottom_frame.pack(pady=10)

login_button = tk.Button(bottom_frame, text="دخول", width=15)
login_button.pack()

# تشغيل التطبيق
window.mainloop()

💡 ملاحظات سريعة:

القسم محتوياته
top_frame عنوان كبير للواجهة
middle_frame حقول الإدخال باستخدام grid()
bottom_frame زر الدخول
sticky="e" لمحاذاة النص إلى اليمين (east)

✅ النتيجة المتوقعة:

واجهة بسيطة أنيقة تحتوي على:

  • عنوان "تسجيل الدخول".
  • حقلين: اسم المستخدم وكلمة المرور.
  • زر لتسجيل الدخول.

إرسال تعليق

0 تعليقات