Создание графического интерфейса на Python с Tkinter. Обучение Python GUI

Графический интерфейс – неотъемлемая составляющая любого современного приложения. Даже во времена MS DOS, несмотря на тотальное доминирование командной строки в те времена, все равно начали появляться первые графические интерфейсы. Чего только стоит легендарный файловый менеджер Norton Commander? А для создания игр работа с графическими интерфейсами вообще является приоритетной.

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

Пример приложения, созданного с применением Tkinter – IDLE. Это очень популярная среда разработки приложений для Python.

Рекомендуется пользоваться Python 3.7 для того, чтобы проверять нашу инструкцию. Дело в том, что третья версия претерпела настолько существенные изменения, что использование второй версии уже далеко от реального программирования.

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

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

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

from tkinter import *

window = Tk()

window.title(«Добро пожаловать в приложение Python»)

window.mainloop()

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

Обратите внимание на последнюю строку. Она содержит метод mainloop(), который принадлежит объекту window. Она нужна для того, чтобы зациклить отображение окна. Если ее не использовать, то окно сразу закроется, и пользователь ничего не увидит.

Создаем виджет Label

Окно – это, конечно, прекрасно. Но что делать, если нам надо отобразить в нем какую-то надпись? Например, слово «Привет». Как это сделать?

Сначала необходимо добавить виджет. Для этого объявляется переменная (в нашем случае – lbl) с использованием следующего кода.

lbl = Label(window, text=»Привет»)

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

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

После того, как мы добавим эти строки в приведенный выше код (а добавлять их надо после той строки, где задается заголовок), получится следующий.

from tkinter import *  

window = Tk()  

window.title(«Добро пожаловать в приложение Python»)  

lbl = Label(window, text=»Привет»)  

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

window.mainloop()

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

Настраиваем размер и шрифт текста

Tkinter – гибкая библиотека. В том числе, в ней можно редактировать текст, задавая произвольный тип шрифта и его размер. Для этого в скобках объекта Label задается свойство font. Характеристики в скобках записываются в следующей последовательности: сначала – начертание шрифта, а потом – его размер. Например, если указать шрифт «Arial Bold» 50 размера, то окно с нашей надписью будет уже поинтереснее.

lbl = Label(window, text=»Привет», font=(«Arial Bold», 50))

Этот параметр может использоваться, в том числе, и для других виджетов. Его можно применять не только к надписи. Если в виджете есть шрифт, его можно изменять.

Настраиваем размеры окна приложения

Программа у нас получилась отличная, конечно. Но, скажите, чего-то не хватает. Все правильно, окошко хотелось бы побольше. Что можно сделать для того, чтобы увеличить его?

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

Например, так.

window.geometry(‘500×350’)

Эта строка делает размер окна по ширине 500 пикселей, а по высоте – 250.

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

Добавляем виджет Button

Теперь нам нужно добавить кнопку. Чтобы это сделать, необходимо создать объект соответствующего класса, а в свойствах задать текст, который будет на ней отображаться.

btn = Button(window, text=»Не нажимать!»)

btn.grid(column=1, row=0)

Мы добавили кнопку после метки в коде. В целом, у нас получилась такая программа.

from tkinter import *  

window = Tk()  

window.title(«Добро пожаловать в приложение Python»)  

window.geometry(‘400×250’)  

lbl = Label(window, text=»Привет», font=(«Arial Bold», 50))  

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

btn = Button(window, text=»Не нажимать!»)  

btn.grid(column=1, row=0)  

window.mainloop()

После того, как этот код будет запущен, получится следующий результат.

Заметьте, что в коде выше мы указали позиционирование кнопки во втором столбце. Но поскольку индексация начинается с нуля, то, соответственно, мы написали индекс столбца 1. Если же его разместить с координатами 0,0, то он просто заменит надпись.

Как изменить цвет текста и фона у Button?

Кастомизация кнопок не ограничивается одним лишь изменением размера и начертания шрифтов. Например, можно сделать кнопку черной, а буквы на ней – красными. Для этого надо прописать соответствующие свойства: fg и bg. Они позволяют настроить цвет надписи и фон соответственно.

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

А теперь приведем пример кода, с помощью которого мы сделали надпись кнопки красной на черном фоне.

btn = Button(window, text=»Не нажимать!», bg=»black», fg=»red»)

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

Кнопка Click

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

Для начала необходимо прописать ту функцию, которая активируется при нажатии кнопки (то есть, будет служить обработчиком событий).

def clicked():

    lbl.configure(text=»Я же просил…»)

После этого она прописывается в качестве свойства command таким образом:

btn = Button(window, text=»Не нажимать!», command=clicked)

Заметьте, что мы используем название функции обработчика событий без скобок.

Если мы запустим этот код, то увидим, что надпись изменилась на «Я же просил».

Вот, что уже умеет наша программа. Но это еще не все.

Получение ввода при помощи класса Entry (текстовое поле Tkinter)

Раньше мы рассматривали самые простые виджеты, которые работали на вывод и простейший ввод (в виде нажатия кнопки). Теперь же мы рассмотрим, как вводить конкретную информацию в поле ввода, используя класс Entry. С его помощью можно добавить в программу такое текстовое поле, которое вы привыкли видеть в других приложениях.

Чтобы его добавить, необходимо создать объект соответствующего класса и присвоить его переменной. Для этого используется следующая строка кода.

txt = Entry(window, width=10)

Но, как вы уже поняли, этого недостаточно. Текстовое поле, равно как и любой другой объект, необходимо добавить к окну. Для этого используется функция grid. Например, так будет выглядеть поле ввода, размещенное во втором столбце (то есть, столбце, имеющем индекс 1). Соответственно, пришлось переместить кнопку немного правее.

Итоговый код получился следующим.

from tkinter import *    

def clicked():  

    lbl.configure(text=»Я же просил…»)  

window = Tk()  

window.title(«Добро пожаловать в приложение Python»)  

window.geometry(‘400×250’)  

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()

Ну, соответственно, программа будет выглядеть так.

Тем не менее, в этом коде есть недостаток. Попробуйте вчитаться в него и понять, в чем он заключается. Дело в том, что при нажатии кнопки будет выдаваться старое сообщение, текст в поле не обрабатывается. Как же сделать так, чтобы приложение могло «считывать» его?

Эта задача достигается с помощью функции get. Соответственно, запишем следующий код.

def clicked():

    res = «Привет {}».format(txt.get())

    lbl.configure(text=res)

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

Ну и небольшая демонстрация окна программы, в которой реализован этот функционал.

Фокус виджета ввода

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

txt.focus()

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

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

Отключение виджета ввода – это операция, вследствие которой он отображается серым цветом, а пользователь не имеет возможности вводить туда текст. Для того, чтобы деактивировать виджет, необходимо выставить его состояние, как «disabled». Приведем фрагмент кода, как это делается.

txt = Entry(window,width=10, state=’disabled’)

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

Добавляем виджет Combobox

Combobox – это выпадающий список. Чтобы его добавить, необходимо создать объект соответствующего класса.

from tkinter.ttk import Combobox

combo = Combobox(window)

Далее необходимо присвоить значения для поля ввода и разместить поле ввода в подходящее место окна.

combo[‘values’] = (1, 2, 3, 4, 5, «Текст»)  

combo.current(1)  # установите вариант по умолчанию  

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

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

Добавляем виджет Checkbutton (чекбокс)

Чтобы добавить виджет Checkbutton, необходимо добавить объект соответствующего класса.

from tkinter.ttk import Checkbutton

chk = Checkbutton(window, text=’Выбрать’)

Если передать объекту var=chk_state, то можно задать значение по умолчанию.

Установка состояния с помощью intvar()

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

chk_state = IntVar()

chk_state.set(0) # False

chk_state.set(1) # True

Установка состояния с помощью booleanvar()

Устанавливать состояние чекбокса можно и с помощью функции BooleanVar. В этом случае метод set устанавливается на значение True или False.

chk_state = BooleanVar()  

chk_state.set(True)  # задайте проверку состояния чекбокса 

Результат от использования BooleanVar и IntVar одинаковые. Можно использовать тот, который больше нравится.

Добавляем виджеты RadioButton

Радиокнопки – один из любимых виджетов пользователей любых программ. Выглядят они так.

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

rad1 = Radiobutton(window, text=’Первый’, value=1)  

rad2 = Radiobutton(window, text=’Второй’, value=2)  

rad3 = Radiobutton(window, text=’Третий’, value=3)

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

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

rad1 = Radiobutton(window,text=’Первая’, value=1, command=clicked)

def clicked():

Получаем значение Radio Button (избранная Radio Button)

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

Для этого прописывается сама переменная, а ей присваивается функция IntVar. А номер кнопки передается в качестве свойства value.

Добавляем виджет ScrolledText (текстовая область Tkinter)

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

from tkinter import scrolledtext

txt = scrolledtext.ScrolledText(window,width=40,height=10)

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

Результат получится приблизительно следующим.

Настраиваем содержимое

Настройка содержимого большого текстового поля осуществляется с помощью метода insert. Смотрите, как это работает.

txt.insert(INSERT, ‘Поле для ввода текста’)

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

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

txt.delete(1.0, END)

Создаем всплывающее окно с сообщением

Всплывающие окна – важные составляющие любого программного обеспечения. Они позволяют быстро проинформировать пользователя о чем-то, не изменяя содержимого основного окна. 

Они создаются таким образом.

from tkinter import messagebox

messagebox.showinfo(‘Заголовок’, ‘Текст’)

Например, можно прописать обработчик клика по кнопке, в котором предусмотрено всплывающее окно.

Показ сообщений о предупреждениях и ошибках

Также возможна настройка показа предупреждающего окна или же уведомления об ошибках. Отличается только функция, которая отображает окно.

messagebox.showwarning(‘Заголовок’, ‘Текст’)  # показывает предупреждающее сообщение

messagebox.showerror(‘Заголовок’, ‘Текст’)  # показывает сообщение об ошибке

Показ диалоговых окон с выбором варианта

Диалоговые окна бывают разными. Например, можно настроить показ такого окна, который выдавал бы варианты ответа. Если вы знаете язык, вы с легкостью догадаетесь, что означает каждая из этих команд.

res = messagebox.askquestion(‘Заголовок’, ‘Текст’)

res = messagebox.askyesno(‘Заголовок’, ‘Текст’)

res = messagebox.askyesnocancel(‘Заголовок’, ‘Текст’)

res = messagebox.askokcancel(‘Заголовок’, ‘Текст’)

res = messagebox.askretrycancel(‘Заголовок’, ‘Текст’)

Кнопка, нажатая пользователем, возвращает значение в переменную результата. Значение истина возвращается в случаях, если было нажато на «ОК», «Да», «Повторить». Во всех остальных случаях возвращается значение false.

Но есть еще функция, которая возвращает три значения – True/False/None в зависимости от выбранной кнопки. Это метод askyesnocancel.

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

Spinbox – это такое поле ввода со стрелками. Добавляется он с помощью команды

spin = Spinbox(window, from_=0, to=100)

Соответственно, параметры from и to отвечают за диапазон допустимых значений.

Значение по умолчанию для Spinbox

Чтобы указать значение по умолчанию, нужно передать параметр textvariable.

spin = Spinbox(window, from_=0, to=100, width=5, textvariable=var)

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

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

from tkinter.ttk import Progressbar

bar = Progressbar(window, length=200)

Меняем цвет Progressbar

Схема изменения цвета Progressbar довольно сложная и требует отдельного рассмотрения. В целом, механика следующая: нужно создать стиль, задать цвет фона, а потом перенести его на Progressbar.

Добавляем поле загрузки файла

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

from tkinter import filedialog

file = filedialog.askopenfilename()

Все эти фрагменты приводятся, как примеры. Вы подставляете свои значения, исходя из ваших задач.

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

Для этого нужно использовать параметр filetypes. При этом требуется указать расширение в tuples.

file = filedialog.askopenfilename(filetypes = ((«Text files»,»*.txt»),(«all files»,»*.*»)))

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

Для работы с меню существует соответствующий класс menu. 

menu = Menu(window)

menu.add_command(label=’Файл’)

window.config(menu=menu)

Видим, что сначала создается меню, а потом добавляются команды. А добавление подменю осуществляется так.

menu.add_cascade(label=’Автор’, menu=new_item)

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

Также Python позволяет создавать вкладки. Последовательность действий довольно сложная, и эта тема требует отдельного рассмотрения:

1. Создается объект класса Notebook.
2. Создается вкладка.
3. Вкладка добавляется в элемент управления вкладками и осуществляется запаковка с целью отображения его в окне.

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

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

Добавляем интервал для виджетов (заполнение)

Для этого используются свойства padx и pady.

lbl1 = Label(tab1, text= ‘label1’, padx=5, pady=5)

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