🎓 الدرس 16 من Tkinter: إضافة الأيقونات (Icons) والنصوص مع الأزرار

Tamer Ahmed يونيو 20, 2025

الهدف من هذا الدرس هو تعلم كيفية جعل الأزرار (Buttons) أكثر جاذبية من خلال إضافة صورة (Icon) بجانب النص.

🎓 الدرس 16 من Tkinter: إضافة الأيقونات (Icons) والنصوص مع الأزرار

📌 لماذا نستخدم الصور في الأزرار؟

  • لزيادة التفاعل البصري.
  • لجعل التطبيق أكثر احترافية.
  • لتسهيل فهم الأوامر مثل: 🖨️ طباعة، 💾 حفظ، 🗑️ حذف...

🧱 الطريقة العامة:

btn = tk.Button(window, text="زر", image=img, compound="left")
  • image: الصورة التي تريد عرضها داخل الزر.
  • compound: تحدد مكان الصورة بالنسبة للنص (left, right, top, bottom, center).

🖼️ مثال كامل:

🔹 صورة + نص في زر واحد:

import tkinter as tk

# إنشاء النافذة
window = tk.Tk()
window.title("زر بصورة ونص")
window.geometry("300x200")

# تحميل صورة (png فقط مع PhotoImage)
icon = tk.PhotoImage(file="save_icon.png")

# إنشاء زر
btn = tk.Button(window, text="حفظ", image=icon, compound="left", padx=10)
btn.pack(pady=40)

window.mainloop()

✅ تأكد أن الصورة موجودة بنفس المجلد، ويفضل أن تكون 32x32 أو 24x24.

📌 خيارات compound لتنسيق الصورة والنص:

القيمة النتيجة
"left" الصورة يسار النص
"right" الصورة يمين النص
"top" الصورة أعلى النص
"bottom" الصورة أسفل النص
"center" تظهر الصورة فقط بدون النص

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

  • تأكد من الاحتفاظ بمرجع الصورة (icon في المثال)، حتى لا تُحذف من الذاكرة.
  • استخدم padx أو pady لمساحة إضافية حول النص أو الصورة.

✅ التمرين التطبيقي: "زر الحفظ الاحترافي"

🎯 المطلوب:

  1. أنشئ نافذة باستخدام Tkinter.
  2. أنشئ زرًا يحتوي على:
    • صورة (مثل رمز حفظ).
    • كلمة "حفظ".
    • الصورة تكون على يسار النص.
  3. عند الضغط على الزر، يتم طباعة "تم حفظ الملف" في الطرفية.

🧾 الكود الكامل للحل:

📌 ملاحظة: تأكد من أن لديك صورة بصيغة .png باسم save_icon.png في نفس مجلد السكربت. يمكنك استخدام أي أيقونة بحجم صغير (مثل 32x32 بكسل).

import tkinter as tk

# دالة عند الضغط على الزر
def حفظ():
    print("تم حفظ الملف")

# إنشاء النافذة
window = tk.Tk()
window.title("زر حفظ احترافي")
window.geometry("300x200")

# تحميل الأيقونة (يفترض أن الصورة باسم save_icon.png)
icon = tk.PhotoImage(file="save_icon.png")

# إنشاء الزر مع الصورة والنص
btn = tk.Button(window, text="حفظ", image=icon, compound="left", command=حفظ, padx=10)
btn.pack(pady=50)

# بدء التطبيق
window.mainloop()

💡 ما تتعلمه من التمرين:

العنصر الاستخدام
PhotoImage لتحميل صورة PNG داخل الزر
compound لتحديد موضع الصورة نسبة للنص
command تنفيذ أمر معين عند الضغط

إرسال تعليق

0 تعليقات