Разметка в Tkinter [Урок №2]

автор

В этой части урока программирования с Tkinter мы познакомимся с менеджерами разметки. Когда мы создаем графический интерфейс нашего приложения, мы определяем, какие виджеты будем использовать, и как они будут расположены в приложении. Для того, чтобы организовать виджеты в приложении, используются специальные невидимые объекты – менеджеры разметки.
Существует два вида виджетов: контейнеры и их дочерние виджеты. Контейнеры объединяют их дочерние виджеты для формирования разметки. У Tkinter есть три встроенных менеджера разметки: pack, grid и place.

  • Place – это менеджер геометрии, который размещает виджеты, используя абсолютное позиционирование.
  • Pack – это менеджер геометрии, который размещает виджеты по горизонтали и вертикали.
  • Grid – это менеджер геометрии, который размещает виджеты в двухмерной сетке.

Абсолютное позиционирование

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

Таким образом, на разных платформах приложения выглядят по-разному. То, что выглядит нормально на Linux, может отображаться некорректно на Mac OS. Изменение шрифтов в нашем приложении также может испортить разметку. Если мы переведем наше приложение на другой язык, мы должны доработать и разметку.

В этом примере мы расположили три изображения при помощи абсолютного позиционирования. Мы использовали менеджер геометрии place.

Мы использовали Image и ImageTk из модуля PIL (Python Imaging Library).

При помощи стилей, мы изменили фон нашего окна на темно-серый.

Мы создали объект изображения и объект фото изображения из изображения в текущей рабочей директории.

Мы создали Label с изображением. Данные ярлыки могут содержать как изображения, так и текст.

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

Ярлык размещен в рамке по координатам x=20 и y=20.
absolute

Примеры Кнопок

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

У нас есть две рамки. Первая рамка – основная, а также вторая – дополнительная, которая растягивается в обе стороны и сдвигает две кнопки в нижнюю часть основной рамки. Кнопки находятся в горизонтальном контейнере и размещены в ее правой части.

Мы создали еще один виджет Frame. Этот виджет занимает практически все пространство окна. Мы изменяем границы рамки, чтобы сама рамка была видна. По умолчанию она плоская.

Кнопка closeButton создана. Она расположена в горизонтальном контейнере. Параметр side позволяет поместить кнопку в правой части горизонтальной полосы. Параметры padx и pady позволяют установить небольшое пространство между виджетами. Параметр padx устанавливает пространство между виджетами кнопки, closeButton и правой границей корневого окна.

Кнопка okButton размещена возле closeButton с установленным свободным пространством в 5 пикселей.
buttons

Обзор

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

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

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

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

В третьей рамке мы разместили ярлык и виджет текста. Ярлык закреплен по северной стороне, а виджет текста занимает все остальное пространство.

review

Калькулятор

Менеджер геометрии grid в Tkinter используется для создания сетки калькулятора.

Менеджер grid используется для организации кнопок в контейнере рамки.

Мы настроили виджет button так, чтобы отображались специфический шрифт и определенная внутренняя рамка от свойства padding.

Мы использовали методы columnconfigure() и rowconfigure() чтобы создать определенное пространство в сетке строк и столбцов. Благодаря этому шагу мы разделяем кнопки определенным пустым пространством.

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

Кнопка cls установлена во второй строке и первом столбце. Стоит отметить, что строки и столбцы начинаются с нуля.

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

calculator

Пример окошки

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

В этом примере мы использовали виджет Label, виджет Text и четыре кнопки.

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

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

Создается виджет текста и помещается во второй ряд и первый столбец. Он охватывает два столбца и четыре строки.
Между виджетом и левым краем корневого окна присутствует пространство в 4 пикселя. Также, виджет закреплен около всех четырех сторон. Поэтому, когда окно расширяется, виджеты текстов увеличиваются во всех направлениях.

Эти две кнопки находятся возле виджета текста.

Эти две кнопки находятся внизу виджета текста. Кнопка «Help» расположена в первом столбце, а кнопка «Ok» в последнем столбце.
В этой части обучения Tkinter мы рассказали о работе с разметкой виджетов.

windows

Вам может быть интересно

Scroll Up