اکثر افرادی که قصد ورود به حوزه‌ی برنامه نویسی را دارند، تصور می‌کنند که برنامه‌نویسی برای ساخت برنامه‌های گرافیکی است. اما برنامه‌های گرافیکی فقط بخشی از حوزه‌ی برنامه نویسی هستند. پایتون، زبانی مناسب برای ساخت برنامه‌های گرافیکی نیست، اما با استفاده از کتابخانه‌هایی مانند Tkinter و kivy می‌توانید برنامه‌های گرافیکی بسیار خوبی با استفاده از پایتون بنویسید. در اینجا، ما به شما کتابخانه‌ی پرکاربرد و محبوب Tkinter پایتون را آموزش می‌دهیم. اگر به این موضوع علاقه‌مند هستید، با ما همراه باشید.
Tkinter یک ماژول داخلی در پایتون است که برای ساخت برنامه‌های GUI استفاده می‌شود. کار با Tkinter خیلی ساده است و این ماژول جزء کتابخانه‌های استاندارد پایتون است، بنابراین نیازی به نصب جداگانه ندارد. به همین دلیل، Tkinter یکی از پرکاربردترین ماژول‌ها برای ساخت برنامه‌های GUI در پایتون است.
همچنین، برای ساخت برنامه‌های GUI در پایتون، به برخی کتابخانه‌های دیگر نیز نیاز خواهید داشت. از این کتابخانه‌ها می‌توان به Kivy، Python Qt و wxPython اشاره کرد.
اگر با توابع پایتون آشنایی کامل ندارید، بهتر است این مقاله را در بایت گیت مطالعه کنید: آشنایی با توابع بازگشتی معروف و نحوه پیاده سازی آنها در پایتون
ساخت برنامه در Tkinter
ایجاد برنامه‌ی GUI با Tkinter به راحتی انجام می‌شود. تنها کافی است که مراحل زیر را دنبال کنید:
- وارد کردن ماژول Tkinter
- ساخت پنجره‌ی اصلی برنامه‌ی GUI
- اضافه کردن یک یا چند ابزارک به برنامه‌ی GUI
- وارد کردن حلقه‌ی رویداد اصلی تا هرگاه کاربر اقدامی انجام دهد، برنامه به درستی عمل کند.
from tkinter import * # =================== مرحله ۱
# writing code needs to
# create the main window of
# the application creating
# main window object named root
root = Tk() # ====================== مرحله ۲
# giving title to the main window
root.title("First_Program")
# Label is what output will be
# show on the window
label = Label(root, text ="Hello World !").pack() #===== مرحله ۳
# calling mainloop method which is used
# when your application is ready to run
# and it tells the code to keep displaying
root.mainloop() #===================== مرحله ۴ابزاری های Tkinter
در Tkinter، ابزارک‌ها (Widgets) عناصری هستند که برای مشاهده و تعامل کاربران با برنامه، نمایش داده می‌شوند. این کنترل‌ها می‌توانند شامل برچسب‌ها، منوها، دکمه‌ها، چک باکس‌ها، دکمه‌های رادیویی و سایر کنترل‌های مفید باشند.
به طور کلی، ابزارک‌ها به عنوان یک المان از رابط کاربری گرافیکی (GUI) عمل می‌کنند و برای نمایش اطلاعات یا فراهم کردن راهی برای تعامل کاربر با سیستم عامل استفاده می‌شوند. در Tkinter، ابزارک‌ها به صورت شیء هستند، به عبارتی نمونه‌هایی از کلاس‌های مختلفی از جمله دکمه‌ها، قالب‌های مختلف و … هستند.
هر ابزارک در Tkinter به صورت یک شیء پایتونی در نظر گرفته می‌شود. برای ایجاد هر ابزارک، باید والد آن را به عنوان یکی از پارامترهای تابع ایجاد ابزارک مشخص کنیم. با این حال، پنجره اصلی “root” که پنجره‌ی سطح بالاتری است و همه عناصر دیگر را در بر می‌گیرد، به عنوان استثناء دارای والد نمی‌باشد.
from tkinter import *
# create root window
root = Tk()
# frame inside root window
frame = Frame(root)
# geometry method
frame.pack()
# button inside frame which is
# inside root
button = Button(frame, text ='bytegate')
button.pack()
# Tkinter event loop
root.mainloop()کلاس ابزارهای Tkinter
در ادامه، لیستی از ابزارک‌های اصلی که Tkinter آنها را پشتیبانی می‌کند، به همراه توضیحات کوتاهی از کاربرد هر یک آورده شده است:
- Label: برای نمایش متن یا تصویر بر روی صفحه استفاده می‌شود.
- Button: برای ایجاد دکمه‌ها در برنامه‌ی شما استفاده می‌شود.
- SpinBox: این امکان را به کاربر می‌دهد تا از مقادیر تعیین‌شده، مقداری را انتخاب کند.
- CheckButton: کاربر از طریق آن می‌تواند چندین گزینه از گزینه‌های موجود را انتخاب کند.
- RadioButton: برای انتخاب فقط یک مورد از گزینه‌های موجود از این آیتم استفاده می‌شود.
- Entry: برای وارد کردن متن تک‌خطی کاربر استفاده می‌شود.
- ComboBox: یک پیکان رو به پایین برای انتخاب گزینه‌ای از لیست گزینه‌های موجود، در اختیار کاربر قرار می‌دهد.
- Frame: به عنوان محلی برای نگهداری و سازمان‌دهی ابزارک‌ها استفاده می‌شود.
- Message: کارکردی شبیه به برچسب (Label) دارد و برای متن‌های چندخطی و غیر قابل ویرایش استفاده می‌شود.
- Menu: برای ایجاد انواع منو در برنامه استفاده می‌شود.
- Scale: یک اسلایدر گرافیکی ایجاد کرده و امکان انتخاب مقدار دلخواه با جابجایی آن را می‌دهد.
- Scrollbar: برای پیمایش به پایین محتویات استفاده می‌شود.
- Canvas: برای کشیدن تصاویر و طرح‌های دیگر مانند گرافیک، متن و غیره استفاده می‌شود.
- Text: امکان ایجاد، ویرایش و نحوه‌ی نمایش یک متن چندخطی را به کاربر می‌دهد.
مدیریت هندسه ابزار ها در Tkinter
برای ایجاد یک ابزارک در Tkinter، باید به یکی از سه متد grid، pack و یا place روی آن صدا زده شود تا نمایش داده شود.
- متد ()pack: ابزارک‌ها را در سطرها یا ستون‌ها دسته‌بندی می‌کند.
- متد ()grid: ابزارک‌ها را در یک جدول دو بعدی قرار می‌دهد.
- متد ()place: به شما امکان می‌دهد، موقعیت و اندازه‌ی یک پنجره را به صورت مطلق یا نسبت به پنجره دیگری مشخص کنید.
ابزارک‌های اصلی Tkinter بسیار زیاد هستند و در اینجا برای توضیح هر یک از آنها، وقت کافی نیست. در این آموزش، با نوشتن یک برنامه، نحوه‌ی استفاده از Tkinter و تعدادی از ابزارک‌های آن را به شما آموزش خواهیم داد. در صورت نیاز به کسب اطلاعات بیشتر در مورد ماژول Tkinter، می‌توانید به مستندات پایتون مراجعه کنید.
آموزش ساخت ماشین حساب در پایتون با کتابخانه Tkinter
برای این کار، مرحله به مرحله کد خود را تکمیل می‌کنیم. ابتدا، همانند مراحل بیان‌شده برای ایجاد برنامه‌ی GUI اقدام به ایجاد بدنه‌ی اصلی برنامه می‌کنیم. به این صورت:
from tkinter import *
cal = Tk()
cal.title("Calculator")
cal.mainloop()سپس پس از ساخت کلی برنامه GUI، به ساخت اجزای یک ماشین حساب گرافیکی می‌پردازیم. اولین قسمت، صفحه نمایشگر ماشین حساب است. روش ساخت آن به شکل زیر است:
from tkinter import *
cal = Tk()
cal.title("Calculator")
operator = ""
text_input = StringVar()
txtDisplay = Entry(cal, font=('arial', 20, 'bold'), textvariable=text_input, bd=30,
insertwidth=4, bg='powder blue', justify='right').grid(columnspan=4)
cal.mainloop()در کد بالا، متغیر operator یک رشته‌ی خالی است که مقادیر وارد شده را در خود ذخیره می‌کند. همچنین، متغیر text_input با استفاده از متد ()StringVar کتابخانه‌ی Tkinter، ورودی را از صفحه کلید دریافت می‌کند.
برای ساخت نمایشگر ماشین حساب باید یک شیء از کلاس Entry بسازیم. در اینجا، شیء ما به نام txtDisplay است که در اولین پارامتر آن، والد خود یعنی cal را می‌گیریم و سپس پارامترهای دیگری که داده می‌شود، مربوط به ویژگی‌های (options) ابزارک است. این ویژگی‌ها از جمله اندازه، فونت، رنگ، جایگاه و غیره هستند که نمایشگر را به شکل دلخواه شما در می‌آورد.
در نهایت، خروجی کد بالا در ویندوز به شکلی که در زیر قابل مشاهده است، نمایش داده می‌شود:
ایجاد دکمه‌ها
برای شروع کار با دکمه “۷”، از کلاس Button برای ساخت آن استفاده می‌کنیم. اولین قدم، ساخت شیء btn7 است که در آن والد اصلی یعنی cal در اولین پارامتر قرار داده می‌شود. در ادامه، ویژگی‌های دکمه‌ی مورد نظر را تعریف می‌کنیم و آنها را به عنوان پارامترهای دیگر به btn7 اضافه می‌کنیم.
from tkinter import *
cal = Tk()
cal.title("Calculator")
operator = ""
text_input = StringVar()
txtDisplay = Entry(cal, font=('arial', 20, 'bold'), textvariable=text_input, bd=30,
insertwidth=4, bg='powder blue', justify='right').grid(columnspan=4)
btn7 = Button(cal, padx=16, pady=16, bd=8, fg='black', font=('arial', 20, 'bold'),
text='7').grid(row=1, column=0)
cal.mainloop()
سه دکمه‌ی دیگر با نام‌های btn8، btn9 و addition تحت عنوان شبیه به btn7 و با همین ویژگی‌ها ایجاد می‌شود. تفاوت مهم این سه دکمه در ویژگی text و متد grid آنها قرار دارد. برای درک بهتر، کدهای زیر را مرور کنید:
…
btn7 = Button(cal, padx=16, pady=16, bd=8, fg='black', font=('arial', 20, 'bold'),
text='7').grid(row=1, column=0)
btn8 = Button(cal, padx=16, pady=16, bd=8, fg='black', font=('arial', 20, 'bold'),
text='8').grid(row=1, column=1)
btn9 = Button(cal, padx=16, pady=16, bd=8, fg='black', font=('arial', 20, 'bold'),
text='9').grid(row=1, column=2)
addition = Button(cal, padx=16, pady=16, bd=8, fg='black', font=('arial', 20, 'bold'),
text='+').grid(row=1, column=3)
…با استفاده از همان الگوی اولیه، سایر دکمه‌های ماشین حساب را با توجه به ویژگی‌های text و grid آنها ایجاد می‌کنیم. برای درک بهتر تفاوت این دکمه‌ها، به ویژگی‌های text و متد grid هر یک از آنها با دقت توجه کنید. کد نوشته شده به صورت زیر است:
from tkinter import *
cal = Tk()
cal.title("Calculator")
operator = ""
text_input = StringVar()
txtDisplay = Entry(cal, font=('arial', 20, 'bold'), textvariable=text_input, bd=30,
insertwidth=4, bg='powder blue', justify='right').grid(columnspan=4)
#======================================================================================
btn7 = Button(cal, padx=16, pady=16, bd=8, fg='black', font=('arial', 20, 'bold'),
text='7').grid(row=1, column=0)
btn8 = Button(cal, padx=16, pady=16, bd=8, fg='black', font=('arial', 20, 'bold'),
text='8').grid(row=1, column=1)
btn9 = Button(cal, padx=16, pady=16, bd=8, fg='black', font=('arial', 20, 'bold'),
text='9').grid(row=1, column=2)
addition = Button(cal, padx=16, pady=16, bd=8, fg='black', font=('arial', 20, 'bold'),
text='+').grid(row=1, column=3)
#======================================================================================
btn4 = Button(cal, padx=16, pady=16, bd=8, fg='black', font=('arial', 20, 'bold'),
text='4').grid(row=2, column=0)
btn5 = Button(cal, padx=16, pady=16, bd=8, fg='black', font=('arial', 20, 'bold'),
text='5').grid(row=2, column=1)
btn6 = Button(cal, padx=16, pady=16, bd=8, fg='black', font=('arial', 20, 'bold'),
text='6').grid(row=2, column=2)
subtraction = Button(cal, padx=16, pady=16, bd=8, fg='black', font=('arial', 20, 'bold'),
text='-').grid(row=2, column=3)
#======================================================================================
btn1 = Button(cal, padx=16, pady=16, bd=8, fg='black', font=('arial', 20, 'bold'),
text='7').grid(row=3, column=0)
btn2 = Button(cal, padx=16, pady=16, bd=8, fg='black', font=('arial', 20, 'bold'),
text='8').grid(row=3, column=1)
btn3 = Button(cal, padx=16, pady=16, bd=8, fg='black', font=('arial', 20, 'bold'),
text='9').grid(row=3, column=2)
multiply = Button(cal, padx=16, pady=16, bd=8, fg='black', font=('arial', 20, 'bold'),
text='*').grid(row=3, column=3)
#======================================================================================
btn0 = Button(cal, padx=16, pady=16, bd=8, fg='black', font=('arial', 20, 'bold'),
text='0').grid(row=4, column=0)
btnClear = Button(cal, padx=16, pady=16, bd=8, fg='black', font=('arial', 20, 'bold'),
text='C').grid(row=4, column=1)
btnEquals = Button(cal, padx=16, pady=16, bd=8, fg='black', font=('arial', 20, 'bold'),
text='=').grid(row=4, column=2)
division = Button(cal, padx=16, pady=16, bd=8, fg='black', font=('arial', 20, 'bold'),
text='/').grid(row=4, column=3)
cal.mainloop()خروجی:
حالا که بخش ظاهر ماشین حساب را تکمیل کردیم، به نوشتن توابع برای فعالسازی دکمه‌ها و نمایشگر می‌پردازیم.
نوشتن تابع btnClick
جهت نمایش اعداد در نمایشگر، لازم است تابعی بنویسیم که با واردکردن آن در ویژگی‌های هر یک از دکمه‌ها، عدد مورد نظر را در نمایشگر نمایش دهد. به همین منظور، یک تابع به نام btnClick تعریف می‌کنیم که با استفاده از کلمه‌ی کلیدی global، تغییرات افزوده شده را روی متغیر بیرونی operator اعمال کند.
from tkinter import *
def btnClick(numbers):
global operator
operator = operator + str(numbers)
text_input.set(operator)
...پس از نوشتن تابع مورد نظر، با استفاده از ویژگی command، آن را به همراه یک lambda در تمامی دکمه‌ها به جز دکمه‌های btnEquals و btnClear اضافه می‌کنیم. برای مثال، نحوه‌ی اضافه کردن تابع btnClick به btn7 به صورت زیر است:
btn7 = Button(cal, padx=16, pady=16, bd=8, fg='black', font=('arial', 20, 'bold'),
text='7', command=lambda:btnClick(7) ).grid(row=1, column=0)نوشتن تابع btnClearDisplay
برای پاک کردن نمایشگر و فعالسازی دکمه‌ی btnClear، لازم است یک تابع مخصوص با عنوان clearDisplay را تعریف کنیم. کد این تابع به صورت زیر است:
...
def btnClearDisplay():
global operator
operator =""
text_input.set("")
...در اینجا هم با استفاده از ویژگی command، تابع clearDisplay را به ویژگی دکمه‌ی btnClear اضافه می‌کنیم.
...
btnClear = Button(cal, padx=16, pady=16, bd=8, fg='black', font=('arial', 20, 'bold'),
text='C', command= btnClearDisplay).grid(row=4, column=1)
...تا این لحظه، در صورت اجرای برنامه، تمام دکمه‌ها به جز دکمه‌ی btnEquals فعال و قابل استفاده هستند.
نوشتن تابع btnEqualsInput
مرحله‌ی آخر، نوشتن تابعی است که حاصل محاسبات را محاسبه و به دست آورد. برای این منظور، تابع btnEqualsInput را تعریف می‌کنیم که با استفاده از متد eval عملیات محاسباتی را انجام می‌دهد. کد این تابع به صورت زیر است:
...
def btnEqualsInput():
global operator
sumup = str(eval(operator))
text_input.set(sumup)
operator=""
...در مرحله‌ی آخر، تابع btnEqualsInput را با استفاده از ویژگی command به ویژگی دکمه‌ی btnEquals اضافه می‌کنیم.
...
btnEquals = Button(cal, padx=16, pady=16, bd=8, fg='black', font=('arial', 20, 'bold'),
text='=', command=btnEqualsInput).grid(row=4, column=2)
...کد نهایی
ما مرحله به مرحله، کد نویسی یک رابط کاربری برای ماشین حساب GUI را انجام دادیم و برای این کار، از ماژول پرطرفدار Tkinter در پایتون استفاده کردیم. کد کامل شده به صورت زیر است:
from tkinter import *
def btnClick(numbers):
global operator
operator = operator + str(numbers)
text_input.set(operator)
def btnClearDisplay():
global operator
operator =""
text_input.set("")
def btnEqualsInput():
global operator
sumup = str(eval(operator))
text_input.set(sumup)
operator=""
cal = Tk()
cal.title("Calculator")
operator = ""
text_input = StringVar()
txtDisplay = Entry(cal, font=('arial', 20, 'bold'), textvariable=text_input, bd=30,
insertwidth=4, bg='powder blue', justify='right').grid(columnspan=4)
btn7 = Button(cal, padx=16, pady=16, bd=8, fg='black', font=('arial', 20, 'bold'),
text='7', command=lambda:btnClick(7) ).grid(row=1, column=0)
btn8 = Button(cal, padx=16, pady=16, bd=8, fg='black', font=('arial', 20, 'bold'),
text='8', command=lambda:btnClick(8)).grid(row=1, column=1)
btn9 = Button(cal, padx=16, pady=16, bd=8, fg='black', font=('arial', 20, 'bold'),
text='9', command=lambda:btnClick(9)).grid(row=1, column=2)
addition = Button(cal, padx=16, pady=16, bd=8, fg='black', font=('arial', 20, 'bold'),
text='+', command=lambda:btnClick('+')).grid(row=1, column=3)
#============================================================================
btn4 = Button(cal, padx=16, pady=16, bd=8, fg='black', font=('arial', 20, 'bold'),
text='4', command=lambda:btnClick(4)).grid(row=2, column=0)
btn5 = Button(cal, padx=16, pady=16, bd=8, fg='black', font=('arial', 20, 'bold'),
text='5', command=lambda:btnClick(5)).grid(row=2, column=1)
btn6 = Button(cal, padx=16, pady=16, bd=8, fg='black', font=('arial', 20, 'bold'),
text='6', command=lambda:btnClick(6)).grid(row=2, column=2)
subtraction = Button(cal, padx=16, pady=16, bd=8, fg='black', font=('arial', 20, 'bold'),
text='-', command=lambda:btnClick('-')).grid(row=2, column=3)
#============================================================================
btn1 = Button(cal, padx=16, pady=16, bd=8, fg='black', font=('arial', 20, 'bold'),
text='1', command=lambda:btnClick(1)).grid(row=3, column=0)
btn2 = Button(cal, padx=16, pady=16, bd=8, fg='black', font=('arial', 20, 'bold'),
text='2', command=lambda:btnClick(2)).grid(row=3, column=1)
btn3 = Button(cal, padx=16, pady=16, bd=8, fg='black', font=('arial', 20, 'bold'),
text='3', command=lambda:btnClick(3)).grid(row=3, column=2)
multiply = Button(cal, padx=16, pady=16, bd=8, fg='black', font=('arial', 20, 'bold'),
text='*', command=lambda:btnClick('*')).grid(row=3, column=3)
#============================================================================
btn0 = Button(cal, padx=16, pady=16, bd=8, fg='black', font=('arial', 20, 'bold'),
text='0', command=lambda:btnClick(0)).grid(row=4, column=0)
btnClear = Button(cal, padx=16, pady=16, bd=8, fg='black', font=('arial', 20, 'bold'),
text='C', command= btnClearDisplay).grid(row=4, column=1)
btnEquals = Button(cal, padx=16, pady=16, bd=8, fg='black', font=('arial', 20, 'bold'),
text='=', command=btnEqualsInput).grid(row=4, column=2)
division = Button(cal, padx=16, pady=16, bd=8, fg='black', font=('arial', 20, 'bold'),
text='/', command=lambda:btnClick('/')).grid(row=4, column=3)
cal.mainloop()در صورت اجرای کد، یک ماشین حساب ساده با رابط کاربری گرافیکی به نمایش در خواهد آمد که با کلیک بر روی دکمه‌های آن، کار خواهد کرد. باید تاکید شود که این ماشین حساب، فقط برای آموزش عملی Tkinter نوشته شده و هنوز ممکن است با مشکلات و نواقصی مواجه شود که شما می‌توانید جهت تمرین و یادگیری بیشتر، آنها را برطرف کنید.
جمع بندی و نکات پایانی
در این آموزش، مفهوم رابط کاربری گرافیکی با استفاده از ماژول Tkinter در پایتون آموزش داده شده است. نحوه‌ی ساخت برنامه‌ی GUI با Tkinter به صورت عملی نیز مورد آموزش قرار گرفته و انواع ابزارک‌های و کاربردهای آنها به اختصار توضیح داده شده است. در نهایت، نوشتن یک ماشین حساب گرافیکی نیز به صورت عملی آموزش داده شده است. با توجه به حجم این مطالب، هنوز بخش‌هایی از ماژول Tkinter در این آموزش پوشش داده نشده است که در صورت تمایل، می‌توانید آنها را نیز یاد بگیرید. امیدواریم این آموزش مورد استفاده واقع شود و منتظر نظرات شما در مورد برنامه نویسی برنامه‌های GUI در پایتون هستیم.
