Графическая библиотека Tkinter

Верстка, картинки, окна

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

До этого при добавлении элементов они у нас располагались друг за другом в ряд командой pack()

Чтобы задать элементам определенное положение в окне в скобках используем параметр side

Например:

############# БИБЛИОТЕКИ #############
import tkinter as tk

############# НАСТРОЙКИ ОКНА #############
window = tk.Tk()
window.title("Пример pack()")
window.geometry("300x300")

############# ЭЛЕМЕНТЫ ОКНА #############
label1 = tk.Label(window, text="Верхний текст", bg="lightblue")
label1.pack(side="top")

label2 = tk.Label(window, text="Нижний текст", bg="lightgreen")
label2.pack(side="bottom")

button = tk.Button(window, text="Кнопка слева")
button.pack(side="left")

entry = tk.Entry(window)
entry.pack(side="right")

############# ЗАПУСК ОКНА #############
window.mainloop()
Python
  • • side="top" - разместить сверху
  • • side="bottom" - разместить снизу
  • • side="left" - разместить слева
  • • side="right" - разместить справа

Если ничего не писать в скобках - будет top по умолчанию

Как это выглядит:

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

Каждый элемент имеет свои координаты в пределах окна: координата X и координата Y

Отсчет начинается с левого верхнего угла, где x=0 и y=0

  • • Чем больше X - тем правее элемент
  • • Чем больше Y - тем ниже элемент

Чтобы разместить элемент на конкретные координаты используем команду place()

В скобках пишем координаты

##################### БИБЛИОТЕКИ #####################
import tkinter as tk

##################### НАСТРОЙКИ ОКНА #####################
window = tk.Tk()
window.title("Пример place()")
window.geometry("300x200")

##################### ЭЛЕМЕНТЫ ОКНА #####################
label = tk.Label(window, text="Нулевая точка", bg="yellow")
label.place(x=0, y=0)

button = tk.Button(window, text="Кнопка на x=100, y=100")
button.place(x=100, y=100)

label = tk.Label(window, text="Текст на x=150, y=30", bg="yellow")
label.place(x=150, y=30)

##################### ЗАПУСК ОКНА #####################
window.mainloop()
Python

Теперь окно выглядит вот так

Также есть параметры relwidth иrelheight со значениями от 0.0 до 1.0

  • • relwidth - растягивает элемент по ширине окна
  • • relheight - растягивает элемент по высоте окна

Пример:

########  БИБЛИОТЕКИ  ########
import tkinter as tk

########  НАСТРОЙКИ ОКНА  ########
window = tk.Tk()
window.title("Пример place()")
window.geometry("400x400")

########  ЭЛЕМЕНТЫ ОКНА  ########
label = tk.Label(window, text="Нулевая точка", bg="yellow")
label.place(x=0, y=0, relwidth=1)

button = tk.Button(window, text="Кнопка на x=100, y=100")
button.place(x=100, y=100, relwidth=0.5)

label = tk.Label(window, text="Текст на x=150, y=30", bg="yellow")
label.place(x=150, y=30, relheight=1)

########  ЗАПУСК ОКНА  ########
window.mainloop()
Python

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

Функция grid() размещает виджеты в виде строк и столбцов, как таблица

В скобках указывается номер строки row и номер столбца column

Также можно указать (а можно не указывать) сколько строк занимает элемент - rowspan, и сколько столбцов - columnspan

Пример:

##################### БИБЛИОТЕКИ #####################
import tkinter as tk

##################### НАСТРОЙКИ ОКНА #####################
window = tk.Tk()
window.title("Пример place()")
window.geometry("300x200")

##################### ЭЛЕМЕНТЫ ОКНА #####################
label = tk.Label(window, text="Имя")
label.grid(row=0, column=0)

entry = tk.Entry(window)
entry.grid(row=0, column=1)

label2 = tk.Label(window, text="Пароль")
label2.grid(row=1, column=0)

entry2 = tk.Entry(window)
entry2.grid(row=1, column=1)

button = tk.Button(window, text="Войти")
button.grid(row=2, column=0, columnspan=2)

##################### ЗАПУСК ОКНА #####################
window.mainloop()
Python

Как это выглядит

Картинка на фоне

Чтобы добавить картинку на фон сначала закидываем ее в папку проекта

Картинка должна быть в формате .png !

Затем создаем переменную для загруженной картинки и в параметре file указываем название картинки

img = tk.PhotoImage(file="dora.png")
Python

Теперь создаем объект label с параметром image

Объект с картинкой должен создаваться раньше всех остальных элементов, иначе будет их перекрывать!

С помощью relwidth и relheight растягиваем ее по всему окну

label = tk.Label(window, image=img)
label.place(relwidth=1, relheight=1)
Python

Полный код примера:

Здесь dora.png поменять на название своей картинки!

##################### БИБЛИОТЕКИ #####################
import tkinter as tk

##################### НАСТРОЙКИ ОКНА #####################
window = tk.Tk()
window.geometry("300x300")

##################### ЭЛЕМЕНТЫ ОКНА #####################
img = tk.PhotoImage(file="dora.png")

label = tk.Label(window, image=img)
label.place(relwidth=1, relheight=1)

label2 = tk.Label(window, text="Дора", font=("Arial", 25), bg="lightblue")
label2.pack()

##################### ЗАПУСК ОКНА #####################
window.mainloop()
Python

Получается такое окно

Открытие второго окна

Для создания второго окна используем tk.Toplevel()

На примере второе окно открывается по нажатию на кнопку «Войти»

def login():
    window2 = tk.Toplevel()
    window2.geometry("300x200")
    window2.title("Логин")
    label = tk.Label(window2, text="Вы авторизованы!")
    label.pack()

button = tk.Button(window, text="Войти", command=login)
button.grid(row=2, column=0, columnspan=2)
Python

Пример с полным кодом:

################### БИБЛИОТЕКИ ###################
import tkinter as tk

################### НАСТРОЙКИ ОКНА ###################
window = tk.Tk()
window.title("Пример place()")
window.geometry("200x200")

################### ЭЛЕМЕНТЫ ОКНА ###################
label = tk.Label(window, text="Имя")
label.grid(row=0, column=0)

entry = tk.Entry(window)
entry.grid(row=0, column=1)

label2 = tk.Label(window, text="Пароль")
label2.grid(row=1, column=0)

entry2 = tk.Entry(window)
entry2.grid(row=1, column=1)

def login():
    window2 = tk.Toplevel()
    window2.geometry("300x200")
    window2.title("Логин")
    label = tk.Label(window2, text="Вы авторизованы!")
    label.pack()

button = tk.Button(window, text="Войти", command=login)
button.grid(row=2, column=0, columnspan=2)

################### ЗАПУСК ОКНА ###################
window.mainloop()
Python

Задания по Tkinter ᕦ^•ω•^ᕤ

  1. Создай окно 400x300 с названием «Pack». Добавь три надписи с разными цветами: одну сверху (top), одну снизу (bottom) и одну слева (left)
  2. Создай окно 400x400 с названием «Place».
    • • Размести надпись в точке (50,50)
    • • Размести кнопку в точке (150,150) и растяни её по ширине с relwidth=0.5
    • • Размести вторую надпись в точке (200,30) и растяни её по высоте окна (relheight=1)
  3. Создай окно 300x200 с названием «Grid»
    • • Размести надпись «Имя» в ячейке (0,0) и поле ввода рядом (0,1)
    • • Размести надпись «Пароль» в ячейке (1,0) и поле ввода рядом (1,1)
    • • Добавь кнопку «Войти»
  4. Добавь фоновую картинку (PNG) на всё окно с помощью Label и
    place(relwidth=1, relheight=1). Добавь надпись поверх картинки
  5. На окне с формой логина (имя и пароль) добавь кнопку «Войти». При нажатии проверяется введенный логин и пароль (который придумываешь сам)
    • • если все верно, создаётся новое окно (Toplevel) с сообщением «Вы авторизованы!»
    • • если неверно – ничего не происходит