Tkinter grid параметры

Обновлено: 05.07.2024

Для позиционирования элементов в окне применяются различные способы, и самый простой способ представляет вызов у элемента метода pack() . Этот метод принимает следующие параметры:

expand (растянуть): если равно True , то виджет заполняет все пространство контейнера.
fill (заполнить): определяет, будет ли виджет растягиваться, чтобы заполнить свободное пространство вокруг. Этот параметр может принимать следующие значения: NONE (по умолчанию, элемент не растягивается), X (элемент растягивается только по горизонтали), Y (элемент растягивается только по вертикали) и BOTH (элемент растягивается по вертикали и горизонтали).
side (сторона): выравнивает виджет по одной из сторон контейнера. Может принимать значения: TOP (по умолчанию, выравнивается по верхней стороне контейнера), BOTTOM (выравнивание по нижней стороне), LEFT (выравнивание по левой стороне), RIGHT (выравнивание по правой стороне).
anchor (якорь): может принимать значения CENTER (центр), N ( north – север), S ( south – юг), W ( west – запад), E ( east – восток) и их комбинации: NW , NE , SW , SE .

Применение метода без параметров может быть таким:

Необходимость реализации виджетов друг за другом с лева на право:

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

Создайте программу с тремя копками: 1, 2, 3. Расположите сверху вниз столбиком: 1, 2, 3 с привязкой к верхнему краю окна. Разверните окно на весь экран и проверьте корректность отображения.
Создайте программу с тремя копками: 1, 2, 3. Расположите сверху вниз столбиком: 3, 2, 1 с привязкой к нижнему краю окна. Разверните окно на весь экран и проверьте корректность отображения.
Создайте программу с тремя копками: 1, 2, 3. Расположите строчкой: 1, 2, 3 с привязкой к левому краю окна. Разверните окно на весь экран и проверьте корректность отображения.
Создайте программу с тремя копками: 1, 2, 3. Расположите строчкой: 3, 2, 1 с привязкой к правому краю окна. Разверните окно на весь экран и проверьте корректность отображения.

Комбинируя параметры side и fill , можно растянуть элемент по вертикали:

Следующие два свойства – fill (заполнение) и expand (расширение). По-умолчанию expand равен нулю (другое значение – единица), а fill – NONE (другие значения BOTH , X , Y ). Создадим окно с одной меткой:

Если начать расширять окно или сразу раскрыть его на весь экран, то метка окажется вверху по вертикали и в середине по горизонтали. Причина, по которой метка не в середине по вертикали заключается в том, что side по-умолчанию равен TOP .

Если установить свойство expand в 1, то при расширении окна метка будет всегда в середине:

Свойство fill заставляет виджет заполнять все доступное пространство. Заполнить его можно во всех направлениях или только по одной из осей:

Последняя опция метода pack() – anchor (якорь) – может принимать значения N ( north – север), S ( south – юг), W ( west – запад), E ( east – восток) и их комбинации:

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

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

Напишите программу с кнопкой растягивающейся на всё окно, независимо от размера окна.

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

в левом верхнем углу окна;
в правом верхнем углу окна;
в левом нижнем углу окна;
в правом нижнем углу окна;

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

в левом верхнем углу окна;
в правом верхнем углу окна;
в левом нижнем углу окна;
в правом нижнем углу окна;

Создайте программу с центральным расположением метки с текстом "Центр". При увеличении размеров окна виджет продолжит оставаться по центру: по горизонтали и вертикали.

Для дальнейшего переиспользования кода, создайте новый файл с названием app_rainbow.py . Напишите программу с заголовком "Colors" и меткой с текстом «Color name», размер шрифта для всех виджетов можно указать font=20 :

Добавьте в программу одно-строчное текстовое поле с текстом «Color code». Выровняйте текст по центру текстового поля, используя свойство justify=CENTER :

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

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

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

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

Базовым моментом в построении графических программ является создание окна. Затем в окно добавляются все остальные компоненты графического интерфейса. Поэтому создадим вначале простейшее окно. Для этого определим следующий скрипт:

Для создания графического окна применяется конструктор Tk() , который определен в модуле tkinter. Создаваемое окно присваивается переменной root, и через эту переменную мы можем управлять атрибутами окна. В частности, с помощью метода title() можно установить заголовок окна.

С помощью метода geometry() - размер окна. Для установки размера в метод geometry() передается строка в формате "Ширина x Высота". Если при создании окна приложения метод geometry() не вызывается, то окно занимает то пространство, которое необходимо для размещения внутреннего содержимого.

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

В результате при запуске скрипта мы увидим такое пустое окошко:

Начальная позиция окна

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

Теперь строка в методе geometry имеет следующий формат: "Ширина x Высота + координатаX + координатаY". То есть при запуске окно будет находиться на 300 пикселей вправо и на 250 пикселей вниз от верхнего левого угла экрана.

Метод place() позволяет задавать абсолютные и относмтельные параметры позиционирования. Он принимает следующие параметры:

height и width : устанавливают соответственно высоту и ширину элемента в пикселях
relheight и relwidth : также задают соответственно высоту и ширину элемента, но в качестве значения используется число float в промежутке между 0.0 и 1.0, которое указывает на долю от высоты и ширины родительского контейнера
x и y : устанавливают смещение элемента по горизонтали и вертикали в пикселях соответственно относительно верхнего левого угла контейнера
relx и rely : также задают смещение элемента по горизонтали и вертикали, но в качестве значения используется число float в промежутке между 0.0 и 1.0, которое указывает на долю от высоты и ширины родительского контейнера
bordermode : задает формат границы элемента. Может принимать значение INSIDE (по умолчанию) и OUTSIDE
anchor : устанавливает опции растяжения элемента. Может принимать значения n, e, s, w, ne, nw, se, sw, c, которые являются сокращениями от Noth(север - вверх), South (юг - низ), East (восток - правая сторона), West (запад - левая сторона) и Center (по центру). Например, значение nw указывает на верхний левый угол.

Следует заметить, что при использовании метода place() не надо использовать метод pack() , чтобы сделать элемент видимым.

Разместим три кнопки задавая абсолютные координаты x и y , точка начала отсчета от левого верхнего угла:

Рассмотрим пример с относительным заданием координат relx= и rely= , для кнопок расположенных по углам:

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

Другой пример с размещением кнопки в центре окна:

Создайте окно заданного размера: 400 на 400 пикселей. Для решения используйте метод place() и абсолютное позиционирование x , y :

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

Создайте окно заданного размера: 600 на 300 пикселей. Для решения используйте метод place() и относительное позиционирование relx , rely :

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

Создайте окно заданного размера: 200 на 100 пикселей. Для решения используйте метод place() и относительное позиционирование relx , rely , anchor :

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

Для дальнейшего переиспользования кода, создайте новый файл с названием app_change_language.py . Напишите программу-форму с переключением интерфейса английский/русский.

При нажатии на кнопу происходит переключение языка интерфейса на русский.

И обратное переключение с русского на английский язык.

Надписи на русском поместились не полностью. Это проблема метода place() .

Метод place() не отслеживает расширение виджетов. Поэтому не желателен для реализации интерфейса.

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

Grid() не растягивает виждеты, находящиеся в нем, а всегда занимает минимально необходимое пространство, необходимое для виджета.

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

column : номер столбца, отсчет начинается с нуля
row : номер строки (ряда), отсчет начинается с нуля
columnspan : сколько столбцов должен занимать элемент
rowspan : сколько строк (рядов) должен занимать элемент
ipadx и ipady : отступы по горизонтали и вертикали соответственно от границ элемента до его текста
padx и pady : отступы по горизонтали и вертикали соответственно от границ ячейки грида до границ элемента
sticky : выравнивание элемента в ячейке, если ячейка больше элемента. Может принимать значения: N, E, S, W, NE, NW, SE, SW, NSEW - они указывают соответствующее направление выравнивания

Начальный пример демонстрации позиционирования с помощью сетки:

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

Пример окна для ввода логина и пароля:

Для дальнейшего переиспользования кода, создайте новый файл с названием app_calculator_fields.py . Используя метод grid() напишите программу состоящую из:

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

Добавьте в программу примеры со знаками: "-", "*", "**", "/", "//", "%". Реализуйте решения этих примеров.

Для дальнейшего переиспользования кода, создайте новый файл с названием app_chessboard.py . Используя метод grid() создайте подобие шахматной доски размером 4 на 4, с обозначением полей: A, B, C, D верхняя горизонтальная строка и 8, 7, 6, 5 левый вертикальный столбик. Создание отдельных клеток реализуйте кнопками, разукрасив и подписав их соответственно.

Добавьте функции нажатия кнопок, при выполнении которых в консоль будут выводиться координаты нажатой кнопки: A1, B3 и т.д.

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

Выводить в текстовое поле координаты нажатых кнопок: A1, B3 и т.д.

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

Читайте также: