Monogenes

Appearance

Метод 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.

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

py
from tkinter import *

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

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

01_pack

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

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

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

02_pack

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

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

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

03_pack

Упражнения ​

  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, можно растянуть элемент по вертикали:

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

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

04_pack

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

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

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

05_pack

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

py
…
label.pack(expand=1)
…

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

06_pack

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

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

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

07_pack

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

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

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

08_pack

Упражнения ​

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

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

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

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

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

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

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

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

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

    090_pack

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

    091_pack

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

    092_pack

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

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

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

    pack_rainbow_final

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