Конспект по python. Модуль tkinter (часть 2 Учитель ... ·...

Конспект по Python. Модуль Tkinter (часть 2)

Учитель информатики Батракова Л.В.

1

В этом конспекте продолжим знакомство с объектами модуля tkinter, предназначенного для работы с

компонентами графического интерфейса пользователя GUI (graphical user interface).

Базовым моментом в построении графических программ является создание окна конструктором Tk().

Затем в окно добавляются все остальные компоненты графического интерфейса.

Поэтому все программы, написанные на tkinter, должны иметь подобный шаблону вид:

from tkinter import *

root=Tk() # создание главного окна (всегда называйте его root)

#остальной код

root.mainloop() # теперь окно будет отображено при запуске

В tkinter визуальные элементы управления называются виджетами (widget, от англ. window gadget).

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

необязательные аргументы, настраивающие элемент управления. Это могут быть: тип шрифта (font=...),

его размер, цвет фона (bg=...), команда, выполняющаяся при активации элемента управления

(command=...) и т.д.

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

1. Кнопка ( Button)

Для создания кнопки используется конструктор Button().

Kонструктор Button() имеет следующий формат: Name = Button (window, options)

Name – имя виджета (идентификатор устанавливает пользователь). Под этим именем данный объект в

дальнейшем используется в программе.

window - ссылка на родительское окно (контейнер). Если в коде создается одно окно (root), то кнопка

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

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

конструктор Button() ссылку на нужное окно.

options - представляет собой набор параметров, которые мы можем установить по их имени:

Параметр Значение width Ширина кнопки. height Высота кнопки text Текст на кнопке. Возможно сделать многострочный текст, используя \n. bg Фон кнопки. fg Цвет текста, который будет иметь кнопка в то время, когда на нее не нажали. bd Ширина границы кнопки. active background Цвет фона (когда кнопка нажата). activeforeground Цвет текста (когда кнопка нажата). disabledbackground Цвет фона (когда свойство state == DISABLED) disabledforeground Цвет текста (когда свойство state == DISABLED). state Состояние кнопки (NORMAL, DISABLED).

NORMAL - обычное состояние кнопки, при котором она может нажиматься и

взаимодействовать с пользователем. DISABLED - такое состояние кнопки,

при котором она не может взаимодействовать с пользователем. compound Расположение картинки на кнопке (CENTER, BOTTOM, LEFT, RIGHT, TOP).

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

можно изменить, изменяя значения свойства compound. BOTTOM - картинка

будет отображаться под текстом. LEFT - картинка будет отображаться слева



2

от текста. RIGHT - картинка будет отображаться справа от текста. TOP - картинка будет отображаться над текстом.

justify Выравнивание текста (CENTER, RIGHT, LEFT).

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

это можно изменить, используя свойство justify. CENTER - текст выравнивается на кнопке по центру. LEFT - текст выравнивается на кнопке

по левому краю. RIGHT - текст выравнивается на кнопке по правому краю. relief Рельеф кнопки (FLAT, GROOVE, RIDGE, SUNKEN, RAISED). overrelief Рельеф кнопки когда над ней находится курсор (FLAT, GROOVE, RIDGE,

SUNKEN, RAISED). image Имя картинки, отображаемой на кнопке. font

Вид шрифта на кнопке. Свойство должно иметь значит вида: "Имя_шрифта

размер". command Обработка нажатия на кнопку. padx

pady Отступ от границ кнопки до ее текста справа и слева. Отступ от границ кнопки до ее текста сверху и снизу.

Пример:

Чтобы сделать элемент видимым, у него вызывается метод pack().

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

Для обработки нажатия на кнопку необходимо установить в конструкторе параметр command, присвоив

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

Здесь в качестве обработчика нажатия устанавливается функция click_button. В этой функции

изменяется глобальная переменная clicks, которая хранит число кликов, и ее значение выводится в

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

и количество кликов будет увеличиваться.

Позиционирование элементов

Любой виджет нужно отобразить в окне. Для позиционирования элементов в окне применяются следующие методы:

метод pack()

метод place()

метод grid()



3

Эти методы называют еще иногда менеджерами геометрии. Если к элементу интерфейса не применить какой-либо из менеджеров геометрии, то он не отобразится в

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

менеджеры. Если вы начали размещать виджеты методом pack(), то не надо тут же использовать методы

grid() (сетка) и place() (место).

Метод pack()

Метод pack(), называемый упаковщиком, имеется у всех виджетов-объектов.

Если в упаковщики не передавать аргументы, то виджеты будут располагаться вертикально, друг над

другом. Тот объект, который первым вызовет pack(), будет вверху. Второй – под первым, и так далее.

У метода pack() есть параметры:

Параметр Значение side Указывает, как будет расположен виджет TOP, BOTTOM, LEFT, RIGHT

(верх, низ, лево, право). Выравнивает виджет по одной из сторон

контейнера.

ipadx , ipady

padx , pady

Задание внутренних (ipadx и ipady) и внешних (padx и pady)

отступов.

fill Заполнение (NONE, BOTH, X, Y). Определяет, будет ли виджет

растягиваться, чтобы заполнить свободное пространство вокруг. expand Расширение (0 или 1). Если равно 1 (True), то виджет заполняет все

пространство контейнера. По умолчанию – 0. anchor Якорь – может принимать значения N (north – север), S (south – юг), W (west

– запад), E (east – восток) и их комбинации

Пример:

Метод place()

Метод place() указывает виджету его положение либо в абсолютных значениях (в пикселях), либо в

долях родительского окна, то есть относительно. Также абсолютно и относительно можно задавать размер

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

Основные параметры place():

anchor (якорь) определяет часть виджета, для которой задаются координаты. Принимает значения

N, NE, E, SE, SW, W, NW или CENTER. По умолчанию NW (верхний левый угол). relwidth,

relheight (относительные ширина и высота) – определяют размер виджета в долях его

родителя. relx, rely определяют относительную позицию в родительском виджете. Координата (0; 0) –

у левого верхнего угла, (1; 1) – у правого нижнего. width, height абсолютный размер виджета в пикселях. Значения по умолчанию (когда данные

опции опущены) приравниваются к естественному размеру виджета, то есть к

тому, который определяется при его создании и конфигурировании. x, y абсолютная позиция в пикселях. Значения по умолчанию приравниваются к нулю.



4

bordermode задает формат границы элемента. Может принимать значение INSIDE (по

умолчанию) и OUTSIDE

Схема с указанием относительных координат:

Для лучшего понимания разницы между абсолютным и относительным позиционированием рассмотрим пример:

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

Кнопка с относительными координатами смещается. Опции relx и rely для нее по-прежнему 0.3 и 0.5,

но уже относительно нового размера окна.

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

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

естественному.

Метод grid()

Метод grid() применяет другой подход к позиционированию элементов, нежели метод place(),

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

Методом grid() окно условно разделяется на ячейки подобно таблице. Адрес каждой ячейки состоит из

номера строки и номера столбца. Нумерация начинается с нуля. Ячейки можно объединять как по

вертикали, так и по горизонтали.



5

На рисунке пунктир обозначает объединение ячеек. Общая ячейка в таком случае обозначается адресом первой.

Метод grid() применяет следующие параметры:

Параметр Значение column номер столбца, отсчет начинается с нуля row номер строки, отсчет начинается с нуля columnspan сколько столбцов должен занимать элемент rowspan сколько строк должен занимать элемент ipadx и ipady отступы по горизонтали и вертикали соответственно от границ элемента до

его текста padx и pady отступы по горизонтали и вертикали соответственно от границ ячейки грида

до границ элемента sticky выравнивание элемента в ячейке, если ячейка больше элемента. Может

принимать значения n, e, s, w, ne, nw, se, sw, которые указывают

соответствующее направление выравнивания

Пример:

Изменение свойств элементов

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

Для изменения текста мы можем использовать промежуточный компонент StringVar. Этот компонент

позволяет создать привязку к строке. Он имеет два метода:

get(): возвращает строку из StringVar

set(str): устанавливает строку в StringVar

Для связи объекта StringVar с текстом визуального элемента у этого элемента в конструкторе надо

установить параметр textvariable.

Ниже представлен пример, когда с помощью нажатия на кнопку будет изменяться ее текст. Для этого

создается переменная buttonText, которая имеет тип StringVar. Для нее устанавливается начальное

значение, а затем переменная btn связывается с этим текстом через параметр textvariable. В итоге

при нажатии на кнопку изменится ее текст.

Пример:



6

Кроме компонента StringVar есть еще ряд подобных компонентов для других типов данных: IntVar

BooleanVar

DoubleVar

Например, можно установить привязку к переменной IntVar и выводить количество кликов:

Метод config()

Метод config()используется, если надо изменять не только текст, но и другие параметры кнопки или

другого компонента. Это способ заключается в вызове у элемента метода config(), в котором и

устанавливается нужный параметр.

Пример: метод config() изменяет код скрипта:

2. Текстовая метка Label

Текстовые метки в Python представлены элементом Label. Этот элемент позволяет выводить

статический текст без возможности редактирования.

Для создания элемента применяется конструктор Label(), формат которого: Name = Label(window, options)

Параметр window представляет ссылку на родительский контейнер, а параметр options представляет

следующие именованные параметры:

Параметр Значение bg/background фоновый цвет bitmap bitmap: ссылка на изображение, которое отображается на метке anchor устанавливает позиционирование текста bitmap ссылка на изображение, которое отображается на метке bd толщина границы метки fg/foreground цвет текста font шрифт текста, например, font="Arial 14" - шрифт Arial высотой 14px height высота элемента cursor курсор указателя мыши при наведении на метку image ссылка на изображение, которое отображается на метке justify устанавливает выравнивание текста. Значение LEFT выравнивает текст по

левому краю, CENTER - по центру, RIGHT - по правому краю padx отступ от границ элемента до его текста справа и слева



7

pady отступ от границ элемента до его текста сверху и снизу relief определяет тип границы, по умолчанию значение FLAT text устанавливает текст метки textvariable устанавливает привязку к элементу StringVar underline указывает на номер символа в тексте кнопки, который подчеркивается. По

умолчанию значение -1, то есть никакой символ не подчеркивается width ширина элемента wraplength при положительном значении строки текста будут переносится для вмещения в

пространство элемента

Пример 1. Вывод в окне приложения текста. Для переноса текста на другую строку можно использовать

эскейп-последовательность \n.

Пример 2. Использование кнопки и метки.

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

3. Поле ввода Entry

Элемент Entry представляет поле для ввода и редактирования однострочного текста.

Конструктор Entry() имеет следующий формат:

Name = Entry(window, options)

Где:

window - ссылка на родительское окно, а options - набор следующих параметров:

Параметр Значение bg фоновый цвет



8

bd толщина границы cursor курсор указателя мыши при наведении на текстовое поле fg цвет текста font шрифт текста justify устанавливает выравнивание текста. Значение LEFT выравнивает текст по

левому краю, CENTER - по центру, RIGHT - по правому краю

relief определяет тип границы, по умолчанию значение FLAT

selectbackground фоновый цвет выделенного куска текста selectforeground цвет выделенного текста show задает маску для вводимых символов state состояние элемента, может принимать значения NORMAL (по умолчанию) и

DISABLED

textvariable устанавливает привязку к элементу StringVar

width ширина элемента

Пример1:

Пример 2:

Пример 3: Определим элемент Entry и по нажатию на кнопку выведем его текст в отдельное окно с

сообщением.



9

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

showinfo(), которая собственно и выводит введенный в текстовое поле текст. Для получения

введенного текста используется компонент StringVar.

Пример 4:

Элемент Entry имеет ряд методов. Основные из них:

insert(index, str): вставляет в текстовое поле строку по определенному индексу

get(): возвращает введенный в текстовое поле текст

delete(first, last=None): удаляет символ по индексу first. Если указан параметр last, то

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

можно использовать значение END.

focus(): устанавливает курсор

Пример 5: Демонстрация использования методов в программе.

При запуске программы сразу же в оба текстовых поля добавляется текст по умолчанию: name_entry.insert(0, "Tom")

surname_entry.insert(0, "Soyer")



10

Кнопка Clear очищает оба поля, вызывая метод delete: def clear():

name_entry.delete(0, END)

surname_entry.delete(0, END)

Вторая кнопка Display, используя метод get, получает введенный текст и выводит его в диалоговое

окно messagebox: def display():

messagebox.showinfo("GUI Python", name_entry.get() + " " + surname_entry.get())

Причем, как видно из примера, нам необязательно обращаться к тексту в Entry через переменные типа

StringVar, мы можем это сделать напрямую через метод get.

4. Окно с информацией Messagebox

Messagebox - окно с информацией. При этом требуется дополнительно импортировать

«подмодуль» tkinter - tkinter messagbox, в котором описаны классы для окон данного типа. from tkinter import messagebox

Код созданного информационного окна может быть следующим:

информационным: messagebox.showinfo('Message title', 'Message info content')

для привлечения внимания (окно предупреждения): messagebox.showwarning('Message warning title', 'Message warning content')

#shows warning message

для вывода информации о возникшей ошибке ПО: messagebox.showerror('Message error title', 'Message error content')

#shows error message

5. Рамка Frame

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

при помощи класса Frame(). Имеет следующий формат:

Name = Frame(window, options)

Где:

window - ссылка на родительское окно, а options - набор следующих параметров:

Параметр Значение bg фоновый цвет height высота элемента width ширина элемента

Frame используется для создания сложных интерфейсов с позиционированием элементов в отдельных

областях окна. Фреймы размещают на главном окне, а уже в фреймах – виджеты:

Для позиционирования элементов в рамке (Frame) применяются методы pack()и grid().



11

Пример 1: с использованием метода pack()

Пример 2: использованием метода grid()

Рассмотрим более сложный пример, созданный по схеме:

Здесь, прямоугольники – это рамки (Frame); внешние рамки являются родительскими по отношению к

внутренним.

Пример 3. Конечный код может быть таким:



12

Обратите внимание на параметр fill в методе pack (), примененном к рамке f_2. Он позволяет

заполнять виджету свободное пространство по оси X, Y или обоим направлениям (BOTH). В данном

случае, это позволило f_2 стать по высоте равной f_1; иначе ее высота равнялась бы суммарной высоте

дочерних виджетов (трех кнопок), что не позволило бы развезти их по разным сторонам.

Пример 3. Вариант разработки интерфейса для программы построения графика.

Задание: Разработать интерфейсную часть программы «Построение графика функции».

Используемая информация:

https://teffalstudy.github.io/python_3/01_first%20-%20tkinter&basics/0108/0108.html

http://www.russianlutheran.org/python/nardo/nardo.html

https://pythonru.com/uroki/obuchenie-python-gui-uroki-po-tkinter#toc-5

https://metanit.com/python/tutorial/9.2.php

https://younglinux.info/python.php

https://younglinux.info/tkinter/grid

https://younglinux.info/tkinter/place

http://kabinet-vplaksina.narod.ru/olderfiles/5/Modul_tkinter.pdf

https://pythonru.com/uroki/obuchenie-python-gui-uroki-po-tkinter

https://teffalstudy.github.io/python_3/01_first%20-%20tkinter&basics/0108/0108.html

http://www.russianlutheran.org/python/nardo/nardo.html

https://pythonru.com/uroki/obuchenie-python-gui-uroki-po-tkinter#toc-5

https://metanit.com/python/tutorial/9.2.php

https://younglinux.info/python.php

https://younglinux.info/tkinter/grid

https://younglinux.info/tkinter/place

http://kabinet-vplaksina.narod.ru/olderfiles/5/Modul_tkinter.pdf

https://pythonru.com/uroki/obuchenie-python-gui-uroki-po-tkinter

Конспект по python. Модуль tkinter (часть 2 Учитель ... ·...

Documents