توسعه رابط کاربری گرافیکی پایتون با Tkinter

این اولین قسمت از مجموعه چند قسمتی ما است روی توسعه رابط کاربری گرافیکی در پایتون با استفاده از Tkinter برای دیدن قسمت های بعدی این مجموعه به لینک های زیر مراجعه کنید:

معرفی

اگر در حال خواندن این مقاله هستید، این احتمال وجود دارد که شما یکی از آن دسته از افرادی باشید که از نرم افزاری که از طریق یک نرم افزار ساده کار می کند قدردانی می کنید. command-line رابط. این سریع، آسان است روی منابع سیستم شما، و احتمالاً برای استفاده از کیبوردهای حرفه ای مانند خودتان بسیار سریعتر است. با این حال، بر کسی پوشیده نیست که اگر می‌خواهیم با نرم‌افزار خود به پایگاه کاربری گسترده‌تری دست یابیم، تنها یک command-line راه حل ممکن است بخش بزرگی از کاربران بالقوه را بترساند. برای اکثر مردم، واضح ترین راه تعامل با یک برنامه استفاده از a است رابط کاربری گرافیکی – آ رابط کاربر گرافیکی.

در حین استفاده از یک رابط کاربری گرافیکی، کاربر با عناصر رابط نامیده شده در تعامل است و آنها را دستکاری می کند ویجت ها. برخی از ویجت‌ها، مانند دکمه‌ها و چک‌باکس‌ها، به کاربر اجازه می‌دهند با برنامه تعامل داشته باشند. برخی دیگر، مانند پنجره ها و قاب ها، به عنوان کانتینر برای ابزارک های دیگر عمل می کنند.

بسته‌های زیادی برای ساخت رابط‌های کاربری گرافیکی در پایتون وجود دارد، اما تنها یکی از این بسته‌ها وجود دارد که A در نظر گرفته می‌شود عملا استاندارد، و با تمام نصب های پیش فرض پایتون توزیع می شود. این بسته نام دارد Tkinter. Tkinter اتصال پایتون به است Tk – یک جعبه ابزار رابط کاربری گرافیکی متن باز و چند پلتفرمی.

ایجاد اولین پنجره شما

همانطور که قبلا ذکر شد، Tkinter با نصب های استاندارد پایتون در دسترس است، بنابراین صرف نظر از سیستم عامل شما، ایجاد اولین پنجره شما باید بسیار سریع باشد. تنها چیزی که نیاز دارید 3 خط کد است:

import tkinter

root = tkinter.Tk()

root.mainloop()

خروجی:

پس از واردات tkinter بسته در خط 1، در خط 3 ما برنامه اصلی برنامه خود را ایجاد می کنیم (root) ویجت پنجره. برای اینکه برنامه به درستی کار کند، فقط باید یک مورد وجود داشته باشد root ویجت پنجره در رابط کاربری ما، و به دلیل اینکه تمام ویجت های دیگر در سلسله مراتب پایین تر از root، باید قبل از هر ویجت دیگری ایجاد شود.

در خط 5، مقدار را مقداردهی اولیه می کنیم root’s mainloop. به لطف این خط، پنجره در یک حلقه باقی می ماند که منتظر رویدادها (مانند تعامل کاربر) می شود و رابط را مطابق با آن به روز می کند. حلقه زمانی پایان می یابد که کاربر پنجره را ببندد یا a quit() روش نامیده می شود.

در مثال زیر، فلسفه دو مرحله ای کلی ایجاد ویجت ها را یاد می گیریم که می تواند برای همه ویجت ها به جز ویندوز اعمال شود. اولین قدم ایجاد نمونه ای از کلاس یک ویجت خاص است. در مرحله دوم، باید از یکی از روش های موجود برای قرار دادن ویجت جدید در یک ویجت موجود دیگر استفاده کنیم. والدین ویجت). ساده ترین ویجتی که می توانید در رابط Tkinter خود قرار دهید یک است برچسب، که به سادگی مقداری متن را نمایش می دهد. مثال زیر یک ویجت برچسب ساده ایجاد می کند:

import tkinter

root = tkinter.Tk()

simple_label = tkinter.Label(root, text="Easy, right?")

simple_label.pack()

root.mainloop()

خروجی:

ما ایجاد می کنیم Label نمونه کلاس در خط 5 کد بالا. در آرگومان اول ما به ویجت والد مورد نظر برچسب اشاره می کنیم که در این مثال ماست root پنجره در آرگومان دوم، متنی را که می‌خواهیم برچسب نمایش دهد، مشخص می‌کنیم.

سپس، در خط 7، ما روشی را برای جهت دهی برچسب خود به داخل استفاده می کنیم root پنجره ساده ترین روش جهت یابی ویجت ها که Tkinter ارائه می دهد این است pack(). برچسب تنها ویجت داخل پنجره است، بنابراین به سادگی در وسط پنجره نمایش داده می شود.

ما بیشتر یاد خواهیم گرفت روی در مثال بعدی، وقتی یک ویجت دیگر را به پنجره اضافه می کنیم، چگونه کار می کند. توجه داشته باشید که اندازه پنجره به طور خودکار با ویجت قرار داده شده در آن تنظیم می شود.

اضافه کردن یک دکمه عملکردی

اکنون، بیایید چیزی را اضافه کنیم که کاربر بتواند با آن تعامل داشته باشد. واضح ترین انتخاب یک دکمه ساده است. یک را بگذاریم دکمه در پنجره ما که راه دیگری برای بستن پنجره به ما می دهد.

import tkinter

root = tkinter.Tk()

root.title("Hello!")

simple_label = tkinter.Label(root, text="Easy, right?")
closing_button = tkinter.Button(root, text="Close window", command=root.destroy)

simple_label.pack()
closing_button.pack()

root.mainloop()

خروجی:

در خط 8 ما خود را ایجاد می کنیم Button نمونه کلاس به روشی بسیار مشابه ما برچسب خود را ایجاد کردیم. همانطور که احتمالاً می بینید، ما یک آرگومان دستور اضافه کردیم که در آن به برنامه می گوییم بعد از کلیک روی دکمه چه اتفاقی باید بیفتد. در این مورد rootصدایی دراماتیک دارد destroy() متد فراخوانی می شود که هنگام اجرا پنجره ما بسته می شود.

در خطوط 10 و 11 مجدداً از عبارت استفاده می کنیم pack() روش. این بار می توانیم آن را کمی بهتر درک کنیم، زیرا اکنون از آن برای قرار دادن دو ویجت در داخل پنجره استفاده می کنیم. بسته به روی به ترتیبی که ویجت های خود را بسته بندی می کنیم، روش فقط آنها را یکی می اندازد روی بالای دیگری، در مرکز افقی. ارتفاع و عرض پنجره با اندازه ویجت ها تنظیم می شود.

احتمالا متوجه خط جدید دیگری شده اید. در خط 5، ما را مشخص می کنیم root پنجره ها’ عنوان. متأسفانه، گسترده‌ترین ویجت رابط کاربری ما به اندازه کافی گسترده نیست که عنوان پنجره قابل مشاهده باشد. بیایید کاری در مورد آن انجام دهیم.

کنترل اندازه پنجره

بیایید نگاهی به سه خط جدید بیندازیم که به ما امکان می دهد به راحتی اندازه پنجره خود را تغییر دهیم.

import tkinter

root = tkinter.Tk()

root.title("Hello!")

root.resizable(width="false", height="false")

root.minsize(width=300, height=50)
root.maxsize(width=300, height=50)

simple_label = tkinter.Label(root, text="Easy, right?")
closing_button = tkinter.Button(root, text="Close window", command=root.destroy)

simple_label.pack()
closing_button.pack()

root.mainloop()

خروجی:

در خط 7 ما تعریف می کنیم که آیا کاربر برنامه باید بتواند پنجره را تغییر دهد یا خیر عرض و ارتفاع. در این مورد، هر دو آرگومان تنظیم می شوند "false"بنابراین اندازه پنجره فقط بستگی دارد روی کد ما اگر خط 9 و 10 نبود بستگی داشت روی اندازه ویدجت های جهت یابی داخل پنجره.

با این حال، در این مثال، ما استفاده می کنیم root’s minsize و maxsize روش هایی برای کنترل حداکثر و حداقل مقادیر عرض و ارتفاع پنجره ما. در اینجا، ما دقیقاً تعریف می کنیم که پنجره چقدر عرض و بلند باشد، اما من شما را تشویق می کنم که با این سه خط بازی کنید تا ببینید بسته به تغییر اندازه چگونه کار می کند. روی اندازه ویجت های ما، و روی حداقل و حداکثر چه مقادیری را تعریف می کنیم.

همانطور که احتمالا قبلاً متوجه شده اید، با استفاده از pack() این روش به ما کنترل زیادی نمی‌دهد که ویجت‌ها پس از بسته‌بندی آن‌ها در ظروف اصلی خود به کجا ختم می‌شوند. نه گفتن pack() روش قابل پیش بینی نیست – به وضوح، گاهی اوقات ابزارک ها را به پنجره در یک ستون پرتاب می کنیم، جایی که یک ویجت قرار می گیرد روی بالاتر از مورد قبلی، لزوما با حس پیچیده ما از زیبایی شناسی سازگار نیست. برای آن موارد، ما می توانیم از هر دو استفاده کنیم pack() با برخی استدلال های هوشمندانه، یا استفاده کنید grid() – روش دیگری برای جهت دهی ویجت ها در داخل کانتینرها.

اول، شاید بدهیم pack() یک فرصت دیگر. با اصلاح خطوط 15 و 16 از مثال قبلی، می توانیم رابط کاربری خود را کمی بهبود دهیم:

simple_label.pack(fill="x")
closing_button.pack(fill="x")

خروجی:

به این روش ساده به آن می گوییم pack() روشی برای کشش برچسب و دکمه در تمام مسیر در امتداد محور افقی. ما همچنین می توانیم راه را تغییر دهیم pack() ویجت های جدید را داخل پنجره پرتاب می کند. به عنوان مثال، با استفاده از آرگومان زیر:

simple_label.pack(side="left")
closing_button.pack(side="left")

خروجی:

می‌توانیم ویجت‌ها را در یک ردیف، از سمت چپ پنجره شروع کنیم. با این حال، pack() تنها روش جهت دهی ویجت ها در داخل ویجت های والد آنها نیست. روشی که زیباترین نتایج را می دهد احتمالاً همین است grid() روشی که به ما امکان می دهد ویجت ها را در ردیف ها و ستون ها مرتب کنیم. به مثال زیر دقت کنید.

import tkinter

root = tkinter.Tk()

simple_label = tkinter.Label(root, text="Easy, right?")
another_label = tkinter.Label(root, text="More text")
closing_button = tkinter.Button(root, text="Close window", command=root.destroy)
another_button = tkinter.Button(root, text="Do nothing")

simple_label.grid(column=0, row=0, sticky="ew")
another_label.grid(column=0, row=1, sticky="ew")
closing_button.grid(column=1, row=0, sticky="ew")
another_button.grid(column=1, row=1, sticky="ew")

root.mainloop()

خروجی:

برای اینکه این مثال کمی واضح تر شود، از شر خطوطی خلاص شدیم که باعث تغییر آن شدند root عنوان و اندازه پنجره در خطوط 6 و 8 یک برچسب و یک دکمه دیگر اضافه کردیم (توجه داشته باشید که کلیک کنید روی هیچ کاری انجام نمی دهد زیرا ما هیچ فرمانی را به آن ضمیمه نکرده ایم).

مهمتر از همه، pack() جایگزین شد grid() در تمام موارد همانطور که احتمالاً به راحتی می توانید بفهمید، استدلال ها column و row اجازه دهید تعریف کنیم که ویجت ما کدام سلول از شبکه را اشغال خواهد کرد. به خاطر داشته باشید که اگر مختصات یکسانی را برای دو ویجت مختلف تعریف کنید، مختصاتی که در کد شما ارائه شده است نمایش داده می شود. روی بالای دیگری

این sticky استدلال احتمالا آنقدر واضح نیست. با استفاده از این گزینه می توانیم لبه های ویجت های خود را به لبه های سلول های شبکه مربوطه بچسبانیم – nشمالی (بالایی)، سخارجی (پایین)، هسمت راست (راست) و wاسترن (سمت چپ). ما این کار را با عبور دادن یک رشته ساده که شامل پیکربندی حروف است انجام می دهیم n، s، e و w.

در مثال ما، لبه های هر چهار ویجت را به سلول های آنها می چسبانیم. شرقی و غربی لبه ها، بنابراین رشته است ew. این باعث می شود که ویجت ها به صورت افقی کشیده شوند. شما می توانید با پیکربندی های مختلف آن چهار حرف بازی کنید. ترتیب آنها در رشته مهم نیست.

اکنون که دو روش مختلف برای جهت دهی ویجت ها را می شناسید، به خاطر داشته باشید که هرگز نباید با هم ترکیب کنید grid() و pack() داخل همان container.

قاب ها

ویندوز تنها ویجت‌هایی نیستند که می‌توانند ویجت‌های دیگری را نیز در خود داشته باشند. برای اینکه رابط های پیچیده خود را واضح تر کنید، معمولاً ایده خوبی است که ویجت های خود را به آنها تفکیک کنید قاب ها.

بیایید سعی کنیم این کار را با چهار ویجت ساده خود انجام دهیم:

import tkinter

root = tkinter.Tk()

frame_labels = tkinter.Frame(root, borderwidth="2", relief="ridge")
frame_buttons = tkinter.Frame(root, borderwidth="2", relief="ridge")

simple_label = tkinter.Label(frame_labels, text="Easy, right?")
another_label = tkinter.Label(frame_labels, text="More text")

closing_button = tkinter.Button(frame_buttons, text="Close window", command=root.destroy)
another_button = tkinter.Button(frame_buttons, text="Do nothing")

frame_labels.grid(column=0, row=0, sticky="ns")
frame_buttons.grid(column=1, row=0)

simple_label.grid(column=0, row=0, sticky="ew")
another_label.grid(column=0, row=1, sticky="ew")

closing_button.pack(fill="x")
another_button.pack(fill="x")

root.mainloop()

خروجی:

بیایید با دقت مثالی را که در بالا نشان داده شده است مرور کنیم. در خطوط 5 و 6 دو جدید تعریف می کنیم Frame ویجت ها بدیهی است که در اولین آرگومان به ویجت والد آنها اشاره می کنیم که همان است root پنجره

به‌طور پیش‌فرض، حاشیه‌های فریم‌ها نامرئی هستند، اما فرض کنید می‌خواهیم ببینیم دقیقاً کجا قرار گرفته‌اند. برای نشان دادن مرزهای آنها، باید به آنها یک عرض معین (در مثال ما 2 پیکسل) و سبک relief (یک نوع افکت سه بعدی) که در آن مرز رسم می شود. وجود دارد 5 سبک مختلف امدادی برای انتخاب – در مثال ما، ما استفاده می کنیم ridge.

Label و Button تعاریف نیز اندکی اصلاح شد (خطوط 8-12). ما می خواستیم برچسب های خود را در ما قرار دهیم frame_labels قاب و دکمه های ما در ما frame_buttons قاب بنابراین، ما مجبور شدیم والدین قبلی آنها را جایگزین کنیم، root، با والدین فریم جدید مربوطه خود.

در خطوط 14 و 15، قاب ها را در داخل جهت قرار می دهیم root پنجره با استفاده از grid() روش. سپس، ما از grid() روش برای جهت دهی برچسب ها (خطوط 17-18)، و pack() روش جهت دهی دکمه ها (خطوط 20-21). برچسب ها و دکمه ها اکنون در ظروف جداگانه قرار دارند، بنابراین هیچ چیز ما را از جهت دهی ویجت ها با استفاده از روش های مختلف باز نمی دارد.

ویندوز سطح بالا

رابط شما نباید بیش از یک داشته باشد root پنجره – اما می‌توانید پنجره‌های زیادی ایجاد کنید که فرزندان آن هستند root پنجره بهترین راه برای انجام این کار استفاده از Toplevel کلاس

import tkinter

root = tkinter.Tk()

new_window = tkinter.Toplevel()
new_window.withdraw()

frame_labels = tkinter.Frame(root, borderwidth="2", relief="ridge")
frame_buttons = tkinter.Frame(root, borderwidth="2", relief="ridge")

simple_label = tkinter.Label(frame_labels, text="Easy, right?")
another_label = tkinter.Label(frame_labels, text="More text")

closing_button = tkinter.Button(frame_buttons, text="Close window", command=root.destroy)
window_button = tkinter.Button(frame_buttons, text="Show new window", command=new_window.deiconify)

frame_labels.grid(column=0, row=0, sticky="ns")
frame_buttons.grid(column=1, row=0)

simple_label.grid(column=0, row=0, sticky="ew")
another_label.grid(column=0, row=1, sticky="ew")

closing_button.pack(fill="x")
window_button.pack(fill="x")

root.mainloop()

در مثال بالا، ما پنجره جدید خود را در خط 5 ایجاد می کنیم. از آنجا که یک پنجره موجودیتی است که در داخل هیچ ویجت دیگری لنگر نیست، ما مجبور نیستیم به والد آن اشاره کنیم یا آن را در داخل ویجت والد جهت یابی کنیم.

مایلیم بعد از فشار دادن یک دکمه پنجره جدید را نشان دهیم. خط 5 بلافاصله آن را نمایش می دهد، بنابراین ما از آن استفاده می کنیم withdraw() روش در خط 6 به منظور پنهان کردن آن. سپس تعریف دکمه را در خط 15 تغییر می دهیم.

جدا از نام و متن متغیر جدید، دکمه اکنون دستوری را اجرا می کند – the new_window روش شی، deiconify، که باعث می شود بعد از کلیک کاربر روی پنجره دوباره ظاهر شود window_button دکمه.

نتیجه گیری

همانطور که می بینید، با استفاده از Tkinter می توانید به راحتی و به سرعت برای کاربران غیر متخصص نرم افزار خود رابط کاربری گرافیکی ایجاد کنید. این کتابخانه در تمام نصب های پایتون گنجانده شده است، بنابراین ساخت اولین پنجره ساده شما تنها چند خط کد با شما فاصله دارد. نمونه های نشان داده شده در بالا به سختی سطح قابلیت های بسته را خراش می دهند.

به خواندن ادامه دهید و قسمت دوم این آموزش Tkinter را بررسی کنید، که به شما یاد می دهد چگونه رابط های کاربری گرافیکی پیچیده، بصری و زیبا ایجاد کنید.