Метод pack()

Для позиционирования элементов в окне применяются различные способы, и самый простой способ представляет вызов у элемента метода 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.

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

from tkinter import *

root = Tk()
button = Button(root, text="Click me!")
button.pack()
root.mainloop()

Результат выполнения:

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

from tkinter import *

root = Tk()
button1 = Button(root, text="Button 1", fg="red", bg="yellow")
button1.pack(side=LEFT)
button2 = Button(root, text="Button 2", fg="orange", bg="green")
button2.pack(side=LEFT)
button3 = Button(root, text="Button 3", fg="white", bg="blue")
button3.pack(side=LEFT)
root.mainloop()

Результат выполнения:

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

from tkinter import *

root = Tk()
button1 = Button(root, text="Button 1", fg="red")
button1.pack()
button2 = Button(root, text="Button 2", fg="green")
button2.pack(side=TOP)
button3 = Button(root, text="Button 3", fg="black")
button3.pack(side=LEFT)
button4 = Button(root, text="Button 4", fg="purple")
button4.pack(side=RIGHT)
button5 = Button(root, text="Button 5", fg="blue")
button5.pack(side=BOTTOM)
root.mainloop()

Результат выполнения:

Упражнения

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

Растягивание виждета

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

from tkinter import *

root = Tk()
button_1 = Button(root, text="One", bg="red", fg="white")
button_1.pack()
button_2 = Button(root, text="Two", bg="green", fg="black")
button_2.pack(side=TOP, fill=X)
button_3 = Button(root, text="Three", bg="blue", fg="yellow")
button_3.pack(side=LEFT, fill=Y)
button_4 = Button(root, text="Four", bg="purple", fg="lightblue")
button_4.pack(side=RIGHT)
button_5 = Button(root, text="Five", bg="blue", fg="pink")
button_5.pack(side=BOTTOM)
root.mainloop()

Результат выполнения:

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

from tkinter import *
root = Tk()
label = Label(bg="lightgreen", width=30, height=10, text="This is a label")
label.pack()
root.mainloop()

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

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

…
label.pack(expand=1)
…

Результат выполнения:

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

…
label.pack(expand=1, fill=Y)
…

Результат выполнения:

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

…
label.pack(expand=1, anchor=SE)
…

Результат выполнения:

Упражнения

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

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

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

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

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

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

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

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

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

   

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

   

   • Добавьте в программу 7 кнопок, цвета которых соответствуют цветам радуги. Коды цветов в шестнадцатеричной кодировке:
     • #ff0000 – красный (red),
     • #ff7d00 – оранжевый (orange),
     • #ffff00 – желтый (yellow),
     • #00ff00 – зеленый (green),
     • #007dff – голубой (lightblue),
     • #0000ff – синий (blue),
     • #7d00ff – фиолетовый (purple).

   

   • Добавьте событие вызова функции при нажатия красной кнопки. Функция выводит в консоль текст: название red и код цвета #ff0000.

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

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

   

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