Tkinter – примеры и руководство как делать GUI на Python

В этом руководстве мы научимся разрабатывать графические интерфейсы пользователя (GUI), написав несколько примеров GUI на Python с использованием пакета Tkinter.

Пакет Tkinter включен в Python как стандартный, поэтому вам не нужно ничего устанавливать для его использования.

Я предполагаю, что у вас есть некоторые базовые знания Python, которые помогут вам понять, что мы делаем.

Мы начнем с создания окна, затем научимся добавлять виджеты, такие как кнопки, комбобоксы и т.д., а затем поиграем с их свойствами. Итак, поехали.

Создайте свое первое приложение с графическим интерфейсом

Сначала мы импортируем пакет Tkinter, создадим окно и зададим его заголовок:

from tkinter import *
window = Tk()
window.title("Добро пожаловать!")
window.mainloop()
Code language: JavaScript (javascript)

Невероятно! Наше приложение работает.

Последняя строка вызывает функцию mainloop. Эта функция запускает бесконечный цикл окна, поэтому оно будет открыто, пока мы его сами не закроем.

Если вы забудете вызвать функцию mainloop, пользователю ничего не будет показано.

Создание виджета label

Чтобы добавить метку к нашему предыдущему примеру, мы создадим ее с помощью класса label:

lbl = Label(window, text="Привет!")
Code language: JavaScript (javascript)

Затем мы установим его положение с помощью функции grid вот так:

lbl.grid(column=0, row=0)

Итоговый код будет выглядеть следующим образом:

from tkinter import *
window = Tk()
window.title("Добро пожаловать!")
lbl = Label(window, text="Привет!")
lbl.grid(column=0, row=0)
window.mainloop()
Code language: JavaScript (javascript)

Вот результат:

Без вызова функции grid для label метка не появится.

Установка размера шрифта метки

Вы можете настроить шрифт метки, чтобы сделать его более крупным или, возможно, жирным. Кроме того, можно изменить стиль шрифта.

Для этого передайте дополнительный параметр font:

lbl = Label(window, text="Привет!", font=("Arial Bold", 50))
Code language: JavaScript (javascript)

Следует отметить, что параметр font может быть передан любому виджету для изменения его шрифта, а не только меткам.

Все замечательно. Но окно настолько маленькое, что мы даже не видим заголовок. Как установить размер окна?

Установка размера окна

Мы можем установить размер окна по умолчанию, используя функцию geometry:

window.geometry('350x200')
Code language: JavaScript (javascript)

Приведенная выше строка устанавливает ширину окна в 350 пикселей и высоту в 200 пикселей.

Давайте попробуем добавить больше виджетов в виде кнопок и посмотрим, как обрабатывать событие нажатия на кнопку.

Добавление виджета кнопки

Давайте начнем с добавления кнопки на окно. Кнопка создается и добавляется так же, как и метка:

btn = Button(window, text="Нажми меня")
btn.grid(column=1, row=0)
Code language: JavaScript (javascript)

В результате код будет выглядеть следующим образом:

from tkinter import *
window = Tk()
window.title("Добро пожаловать!")
window.geometry('350x200')
lbl = Label(window, text="Привет!")
lbl.grid(column=0, row=0)
btn = Button(window, text="Нажми меня")
btn.grid(column=1, row=0)
window.mainloop()
Code language: JavaScript (javascript)

Результат будет выглядеть так:

Обратите внимание, что мы размещаем кнопку во втором столбце окна, то есть в столбце 1. Если забыть об этом и поместить кнопку в тот же столбец (в данном случае 0), то будет отображаться только кнопка, так как кнопка будет находиться над меткой.

Изменение цвета фона и шрифта кнопки.

Вы можете изменить цвет текста кнопки или любого другого виджета с помощью свойства fg.

Также с помощью свойства bg можно изменить цвет фона любого виджета.

btn = Button(window, text="Click Me", bg="orange", fg="red")
Code language: JavaScript (javascript)

Сейчас, если вы попытаетесь нажать на кнопку, ничего не произойдет, потому что событие нажатия кнопки еще не задано.

Обработка события нажатия кнопки

Сначала мы напишем функцию, которая должна выполняться при нажатии на кнопку:

def clicked():
    lbl.configure(text="Кнопка нажата!!")
Code language: JavaScript (javascript)

Затем мы свяжем её с кнопкой, указав функцию следующим образом:

btn = Button(window, text="Нажми меня", command=clicked)
Code language: JavaScript (javascript)

Обратите внимание, что мы пишем просто clicked, а не clicked() со скобками.

Теперь весь код будет выглядеть следующим образом:

from tkinter import *
def clicked():
    lbl.configure(text="Кнопка нажата!!")
window = Tk()
window.title("Добро пожаловать!")
window.geometry('350x200')
lbl = Label(window, text="Привет!")
lbl.grid(column=0, row=0)
btn = Button(window, text="Нажми меня", command=clicked)
btn.grid(column=1, row=0)
window.mainloop()
Code language: JavaScript (javascript)

Когда мы жмем на кнопку, то получаем нужный результат:

Отлично!

Ввод данных с помощью класса Entry (текстовое поле Tkinter)

В предыдущих примерах графического интерфейса Python мы рассмотрели, как добавлять простые виджеты. Теперь давайте попробуем получить данные от пользователя, используя класс Tkinter Entry (текстовое поле Tkinter).

Вы можете создать текстовое поле с помощью класса Tkinter Entry следующим образом:

Далее вы можете добавить виджет в окно с помощью функции grid, как и раньше.

Наш код будет выглядеть так::

from tkinter import *
def clicked():
    lbl.configure(text="Кнопка нажата!!")
window = Tk()
window.title("Добро пожаловать!")
window.geometry('350x200')
lbl = Label(window, text="Привет!")
lbl.grid(column=0, row=0)
txt = Entry(window,width=10)
txt.grid(column=1, row=0)
btn = Button(window, text="Нажми меня", command=clicked)
btn.grid(column=2, row=0)
window.mainloop()
Code language: JavaScript (javascript)

Результат будет следующим:

Теперь, если вы нажмете на кнопку, будет выведено то же сообщение, что и выше. Как насчет показа текста, набранного в виджете ввода?

Мы можем получить введенный текст с помощью функции get. Затем мы можем добавить его в нашу функцию clicked, например, так:

def clicked():
    res = "Добро пожаловать, " + txt.get()
    lbl.configure(text= res)
Code language: JavaScript (javascript)

Если вы нажмете на кнопку и в виджете ввода будет текст, он покажет “Добро пожаловать, “, соединенный с введенным текстом.

Вот полный код:

from tkinter import *
def clicked():
    res = "Добро пожаловать, " + txt.get()
    lbl.configure(text= res)
window = Tk()
window.title("Добро пожаловать!")
window.geometry('350x200')
lbl = Label(window, text="Привет!")
lbl.grid(column=0, row=0)
txt = Entry(window,width=10)
txt.grid(column=1, row=0)
btn = Button(window, text="Нажми меня", command=clicked)
btn.grid(column=2, row=0)
window.mainloop()
Code language: JavaScript (javascript)

Запустите приведенный выше код и проверьте результат:

Потрясающе!

Каждый раз, когда мы запускаем код, мы должны кликнуть на виджет ввода, чтобы установить фокус для написания текста. Давайте попробуем установить фокус автоматически?

Установка фокуса на виджете ввода

Это очень просто, все, что нам нужно сделать, это вызвать функцию focus:

txt.focus()
Code language: CSS (css)

Когда вы запустите код, вы заметите, что вы можете сразу же набирать текст – курсор установится в поле автоматически.

Отключение виджета ввода

Чтобы отключить виджет ввода, можно установить свойство state в значение disabled:

txt = Entry(window,width=10, state='disabled')
Code language: JavaScript (javascript)

Теперь вы больше не можете вводить никакой текст.

Добавление виджета combobox

Чтобы добавить виджет combobox, можно использовать класс Combobox из библиотеки ttk, как показано ниже:

from tkinter.ttk import *
combo = Combobox(window)
Code language: JavaScript (javascript)

Затем вы можете добавить значения в список.

from tkinter import *
from tkinter.ttk import *
window = Tk()
window.title("Добро пожаловать!")
window.geometry('350x200')
combo = Combobox(window)
combo['values']= (1, 2, 3, 4, 5, "Какой-то текст")
combo.current(1) #Элемент выбранный по умолчанию
combo.grid(column=0, row=0)
window.mainloop()
Code language: PHP (php)

Как вы видите, мы добавляем элементы combobox, используя кортеж значений.

Чтобы установить выбранный элемент, можно передать индекс нужного элемента функцию current.

Чтобы получить выбранный элемент, можно использовать функцию get, как показано ниже:

combo.get()
Code language: CSS (css)

Добавление виджета Checkbutton (Tkinter checkbox)

Чтобы создать виджет Checkbutton, вы можете использовать класс Checkbutton:

chk = Checkbutton(window, text='Выбери меня')
Code language: JavaScript (javascript)

Кроме того, вы можете установить состояние “checked”, передав значение активации кнопке Checkbutton, как показано ниже:

from tkinter import *
from tkinter.ttk import *
window = Tk()
window.title("Добро пожаловать!")
window.geometry('350x200')
chk_state = BooleanVar()
chk_state.set(True) #Устанавливаем состояние по умолчанию checked
chk = Checkbutton(window, text='Выбери меня', var=chk_state)
chk.grid(column=0, row=0)
window.mainloop()
Code language: PHP (php)

Проверка результата:

Установка состояния Checkbutton

Здесь мы создаем переменную типа BooleanVar, которая не является стандартной переменной Python, это переменная Tkinter. Затем мы передаем его в класс Checkbutton для установки состояния галочки, как показано выше. Вы можете установить булево значение false, чтобы отключить отметку.

Также вы можете использовать IntVar вместо BooleanVar и установить значение 0 или 1.

chk_state = IntVar()
chk_state.set(0) #Галочки нет
chk_state.set(1) #Галочка есть
Code language: PHP (php)

Добавление виджета radio button

Чтобы их добавить, вы можете использовать класс RadioButton, как показано ниже:

rad1 = Radiobutton(window,text='Первый пункт', value=1)
Code language: JavaScript (javascript)

Обратите внимание, что вы должны установить для каждой радиокнопки свое значение, иначе они не будут работать.

from tkinter import *
from tkinter.ttk import *
window = Tk()
window.title("Добро пожаловать!")
window.geometry('350x200')
rad1 = Radiobutton(window,text='Первый пункт', value=1)
rad2 = Radiobutton(window,text='Второй пункт', value=2)
rad3 = Radiobutton(window,text='Третий пункт', value=3)
rad1.grid(column=0, row=0)
rad2.grid(column=1, row=0)
rad3.grid(column=2, row=0)
window.mainloop()
Code language: JavaScript (javascript)

Результат выполнения приведенного выше кода выглядит следующим образом:

Кроме того, вы можете установить команду любой из этих радиокнопок на определенную функцию, так что если пользователь нажмет на любую из них, она выполнит код назначенной функции.

Вот пример:

rad1 = Radiobutton(window,text='Первый пункт', value=1, command=clicked)
def clicked():
# Код функции
Code language: PHP (php)

Все очень просто!

Получить значение радиокнопки (выбранный вариант)

Чтобы получить текущую выбранную радиокнопку или значение радиокнопки, вы можете передать радиокнопкам параметр variable, а затем взять его значение.

from tkinter import *
from tkinter.ttk import *
window = Tk()
window.title("Добро пожаловать!")
window.geometry('350x200')
selected = IntVar()
rad1 = Radiobutton(window,text='Первый пункт', value=1, variable=selected)
rad2 = Radiobutton(window,text='Второй пункт', value=2, variable=selected)
rad3 = Radiobutton(window,text='Третий пункт', value=3, variable=selected)
def clicked():
   print(selected.get())
btn = Button(window, text="Нажми меня!", command=clicked)
rad1.grid(column=0, row=0)
rad2.grid(column=1, row=0)
rad3.grid(column=2, row=0)
btn.grid(column=3, row=0)
window.mainloop()
Code language: JavaScript (javascript)

Добавление виджета ScrolledText (Tkinter textarea)

Чтобы добавить виджет ScrolledText, вы можете использовать класс ScrolledText, как показано ниже:

from tkinter import scrolledtext
txt = scrolledtext.ScrolledText(window,width=40,height=10)
Code language: JavaScript (javascript)

Мы указываем ширину и высоту виджета, иначе он заполнит все окно.

from tkinter import *
from tkinter.ttk import *
from tkinter import scrolledtext
window = Tk()
window.title("Добро пожаловать!")
window.geometry('350x200')
txt = scrolledtext.ScrolledText(window,width=40,height=10)
txt.grid(column=0,row=0)
window.mainloop()
Code language: JavaScript (javascript)

Результат:

Установка содержимого scrolledtext.

Чтобы задать содержимое у scrolledtext, можно использовать метод insert, как показано ниже:

txt.insert(INSERT,'Какой-то текст')
Code language: JavaScript (javascript)

Удаление/очистка содержимого scrolledtext

Чтобы удалить содержимое виджета с прокруткой текста, можно использовать метод delete, как показано ниже:

txt.delete(1.0,END)
Code language: CSS (css)

Отлично!

Создание MessageBox

Чтобы отобразить окно сообщения с помощью Tkinter, вы можете использовать библиотеку messagebox, как показано ниже:

from tkinter import messagebox
messagebox.showinfo('Заголовок всплывающего окна','Содержимое всплывающего окна')
Code language: JavaScript (javascript)

Достаточно просто!

Покажем сообщение, когда пользователь нажмет на кнопку.

from tkinter import *
from tkinter import messagebox
window = Tk()
window.title("Добро пожаловать!")
window.geometry('350x200')
def clicked():
    messagebox.showinfo('Заголовок всплывающего окна','Содержимое всплывающего окна')
btn = Button(window,text='Нажми меня!', command=clicked)
btn.grid(column=0,row=0)
window.mainloop()
Code language: JavaScript (javascript)

Когда вы нажмете на кнопку, появится информационное окно с сообщением.

Отображение сообщений об ошибках и предупреждений

Таким же можно отобразить предупреждающее сообщение или сообщение об ошибке. Единственное, что необходимо изменить messagebox.showinfo на messagebox.showwarning или messagebox.showerror.

messagebox.showwarning('Заголовок окна', 'Содержимое окна')  #Окно с иконкой предупрждения
messagebox.showerror('Заголовок окна', 'Содержимое окна')  #Окно с иконкой ошибки
Code language: PHP (php)

Отображение диалоговых окон с вопросами и ответами

Чтобы отобразить пользователю окно сообщения “да/нет”, можно использовать одну из следующих функций messagebox:

res = messagebox.askquestion('Заголовок окна','Содержимое окна')
res = messagebox.askyesno('Заголовок окна','Содержимое окна')
res = messagebox.askyesnocancel('Заголовок окна','Содержимое окна')
res = messagebox.askokcancel('Заголовок окна','Содержимое окна')
res = messagebox.askretrycancel('Заголовок окна','Содержимое окна')
Code language: JavaScript (javascript)

Вы можете выбрать подходящий стиль сообщения в соответствии с вашей задачей. Просто замените функцию showinfo в приведенном выше коде и запустите ее.

Вы также можете проверить, какую кнопку нажал пользователь, используя переменную result.

Если вы нажмете OK, или “да”, или “повторить попытку”, то вернется True, а если вы выберете “нет” или “отмена”, то вернется False.

Единственной функцией, которая возвращает одно из трех значений, является функция askyesnocancel , которая возвращает True, False или None .

Добавление SpinBox (виджет чисел)

Чтобы создать данный виджет, вы можете использовать класс Spinbox, как показано ниже:

spin = Spinbox(window, from_=0, to=100)
Code language: JavaScript (javascript)

Здесь мы создаем виджет Spinbox и передаем параметры from_ и to, чтобы указать диапазон чисел для Spinbox.

Кроме того, вы можете указать ширину виджета с помощью параметра width:

spin = Spinbox(window, from_=0, to=100, width=5)
Code language: JavaScript (javascript)

Давайте посмотрим весь пример:

from tkinter import *
from tkinter import messagebox
window = Tk()
window.title("Добро пожаловать!")
window.geometry('350x200')
spin = Spinbox(window, from_=0, to=100, width=5)
spin.grid(column=0,row=0)
window.mainloop()
Code language: JavaScript (javascript)

Вы можете указать числа для Spinbox вместо использования всего диапазона, например, так:

spin = Spinbox(window, values=(3, 8, 11), width=5)
Code language: JavaScript (javascript)

В результате виджет Spinbox покажет только 3 числа: 3, 8 и 11.

Установка значения по умолчанию для Spinbox

Чтобы установить значение по умолчанию для Spinbox, вы можете передать его в параметр textvariable, как показано ниже:

var =IntVar()
var.set(36)
spin = Spinbox(window, from_=0, to=100, width=5, textvariable=var)
Code language: JavaScript (javascript)

Теперь, если вы запустите программу, Spinbox отобразит значение по умолчанию 36.

Добавление виджета Progressbar

Чтобы создать прогресс-бар, вы можете использовать класс progressbar, как показано ниже:

from tkinter.ttk import Progressbar
bar = Progressbar(window, length=200)
Code language: JavaScript (javascript)

Значение шкалы можно задать следующим образом:

bar['value'] = 70
Code language: JavaScript (javascript)

Вы можете установить это значение в соответствии с нужным вам процессом, например, загрузкой файла или выполнением задачи.

Изменение цвета Progressbar

Изменение цвета прогрессбара сначала кажется немного сложным, но на самом деле это очень просто.

Сперва мы создадим стиль, затем в этом стиле установим цвет фона, и, наконец, присвоим стиль Progressbar’у.

Посмотрите следующий пример:

from tkinter import *
from tkinter.ttk import Progressbar
from tkinter import ttk
window = Tk()
window.title("Добро пожаловать!")
window.geometry('350x200')
style = ttk.Style()
style.theme_use('default')
style.configure("black.Horizontal.TProgressbar", background='black')
bar = Progressbar(window, length=200, style='black.Horizontal.TProgressbar')
bar['value'] = 70
bar.grid(column=0, row=0)
window.mainloop()
Code language: JavaScript (javascript)

Результат будет выглядеть так:

Окно добавления файла (выбор файла и каталога).

Для создания такого окна вы можете использовать класс filedialog, как показано ниже:

from tkinter import filedialog
file = filedialog.askopenfilename()
Code language: JavaScript (javascript)

После выбора файла и нажатия кнопки открыть, в переменной будет указан путь к файлу.

Вы также можете выбрать несколько файлов:

files = filedialog.askopenfilenames()

Указание типов файлов (фильтр по расширению)

Вы можете указать типы файлов с помощью параметра filetypes, который задает расширение в кортежах.

file = filedialog.askopenfilename(filetypes = (("Text files","*.txt"),("all files","*.*")))
Code language: JavaScript (javascript)

Директорию можно получить с помощью метода askdirectory:

dir = filedialog.askdirectory()

Вы можете указать начальный каталог, указав initialdir:

from os import path
file = filedialog.askopenfilename(initialdir= path.dirname(__file__))
Code language: JavaScript (javascript)

Добавление меню

Чтобы добавить меню, вы можете использовать класс menu:

from tkinter import Menu
menu = Menu(window)
menu.add_command(label='Файл')
window.config(menu=menu)
Code language: JavaScript (javascript)

Сначала мы создадим меню. Затем мы добавляем нашу первую метку. После этого мы назначаем меню окну.

Вы можете добавить пункты в любое меню с помощью функции add_cascade(), например, так:

menu.add_cascade(label='Файл', menu=new_item)
Code language: JavaScript (javascript)

Наш код будет выглядеть так:

from tkinter import *
from tkinter import Menu
window = Tk()
window.title("Добро пожаловать!")
window.geometry('350x200')
menu = Menu(window)
new_item = Menu(menu)
new_item.add_command(label='Новый')
menu.add_cascade(label='Файл', menu=new_item)
window.config(menu=menu)
window.mainloop()
Code language: JavaScript (javascript)

Вы можете добавить столько пунктов, сколько захотите.

from tkinter import *
from tkinter import Menu
window = Tk()
window.title("Добро пожаловать!")
window.geometry('350x200')
menu = Menu(window)
new_item = Menu(menu)
new_item.add_command(label='Новый')
new_item.add_separator()
new_item.add_command(label='Редактировать')
menu.add_cascade(label='Файл', menu=new_item)
window.config(menu=menu)
window.mainloop()
Code language: JavaScript (javascript)

Здесь мы добавим еще один пункт меню под названием “Редактировать” с разделителем.

Вы можете отключить пунктирную линию в верхней части выпадающего списка:

new_item = Menu(menu, tearoff=0)

Вы можете написать любой код, который срабатывает при нажатии пользователем на любой пункт меню, указав свойство command.

new_item.add_command(label='Новый', command=clicked)
Code language: JavaScript (javascript)

Добавление виджета Notebook (элемент управления вкладками)

Чтобы создать блок управления вкладками, необходимо выполнить три шага.

• Сначала создадим блок управления вкладками с помощью класса Notebook
• Создадим вкладку с помощью класса Frame.
• Добавим вкладку в блок управления вкладками.
• Расположим блок управления вкладками так, чтобы он отображался в окне.

from tkinter import *
from tkinter import ttk
window = Tk()
window.title("Добро пожаловать!")
window.geometry('350x200')
tab_control = ttk.Notebook(window)
tab1 = ttk.Frame(tab_control)
tab_control.add(tab1, text='Первая вкладка')
tab_control.pack(expand=1, fill='both')
window.mainloop()
Code language: JavaScript (javascript)

Вы можете добавить столько вкладок, сколько захотите.

Добавление виджетов на вкладки

После создания вкладок вы можете разместить виджеты внутри них, назначив родительское свойство нужной вкладке.

Добавление отступов у виджетов (spacing или padding)

Вы можете добавить отступы элементам, чтобы они выглядели красиво скомпонованными, используя свойства padx и pady.

Просто передайте padx и pady любому виджету и присвойте им значение.

lbl1 = Label(tab1, text= 'Метка', padx=5, pady=5)
Code language: JavaScript (javascript)

Все просто!

В этом руководстве мы рассмотрели множество примеров графических интерфейсов Python, использующих библиотеку Tkinter, и увидели, насколько просто разрабатывать GUI с ее помощью.

Надеюсь, эти примеры будут вам полезны.