Слайд 2
![Библиотека Tkinter установлена в Python в качестве стандартного модуля, поэтому](/_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/580878/slide-1.jpg)
Библиотека Tkinter установлена в Python в качестве стандартного модуля, поэтому нам
не нужно устанавливать что-либо для его использования.
Слайд 3
![Создание своего первого графического интерфейса](/_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/580878/slide-2.jpg)
Создание своего первого графического интерфейса
Слайд 4
![from tkinter import * window = Tk() window.title("Добро пожаловать в](/_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/580878/slide-3.jpg)
from tkinter import *
window = Tk()
window.title("Добро пожаловать в приложение
PythonRu")
window.mainloop()
Последняя строка вызывает функцию mainloop. Эта функция вызывает бесконечный цикл окна, поэтому окно будет ждать любого взаимодействия с пользователем, пока не будет закрыто.
Слайд 5
![](/_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/580878/slide-4.jpg)
Слайд 6
![Настройка размеров окна приложения](/_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/580878/slide-5.jpg)
Настройка размеров окна приложения
Слайд 7
![Мы можем установить размер окна по умолчанию, используя функцию geometry](/_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/580878/slide-6.jpg)
Мы можем установить размер окна по умолчанию, используя функцию geometry следующим образом:
window.geometry('400x250')
В приведенной
выше строке устанавливается окно шириной до 400 пикселей и высотой до 250 пикселей.
Слайд 8
![](/_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/580878/slide-7.jpg)
Слайд 9
![](/_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/580878/slide-8.jpg)
Слайд 10
![Создание виджета Label](/_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/580878/slide-9.jpg)
Слайд 11
![Чтобы добавить текст в наш предыдущий пример, мы создадим переменную](/_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/580878/slide-10.jpg)
Чтобы добавить текст в наш предыдущий пример, мы создадим переменную lbl , с
помощью класса Label, например:
lbl = Label(window, text="Привет")
Слайд 12
![Затем мы установим позицию в окне с помощью функции grid](/_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/580878/slide-11.jpg)
Затем мы установим позицию в окне с помощью функции grid и укажем ее
следующим образом:
lbl.grid(column=0, row=0)
Полный код, будет выглядеть следующим образом:
from tkinter import *
window = Tk()
window.title("Добро пожаловать в приложение PythonRu")
lbl = Label(window, text="Привет") lbl.grid(column=0, row=0)
window.mainloop()
Слайд 13
![](/_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/580878/slide-12.jpg)
Слайд 14
![Вы можете задать шрифт текста и размер. Также можно изменить](/_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/580878/slide-13.jpg)
Вы можете задать шрифт текста и размер. Также можно изменить стиль
шрифта. Для этого передайте параметр font таким образом:
lbl = Label(window, text="Привет", font=("Arial Bold", 50), bg=‘#ff0000’, bd=20,fg=‘#00ff00’)
font(‘Comic Sans MS’,24,’bold’)
Слайд 15
![](/_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/580878/slide-14.jpg)
Слайд 16
![Обратите внимание, что параметр font может быть передан любому виджету,](/_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/580878/slide-15.jpg)
Обратите внимание, что параметр font может быть передан любому виджету, для того, чтобы
поменять его шрифт, он применяется не только к Label.
Слайд 17
![Добавление виджета Button](/_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/580878/slide-16.jpg)
Добавление виджета Button
Слайд 18
![Начнем с добавления кнопки в окно. Кнопка создается и добавляется](/_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/580878/slide-17.jpg)
Начнем с добавления кнопки в окно. Кнопка создается и добавляется в
окно так же, как и метка:
btn = Button(window, text="Не нажимать!") btn.grid(column=1, row=0)
Слайд 19
![](/_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/580878/slide-18.jpg)
Слайд 20
![Обратите внимание, что мы помещаем кнопку во второй столбец окна,](/_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/580878/slide-19.jpg)
Обратите внимание, что мы помещаем кнопку во второй столбец окна, что
равно 1. Если вы забудете и поместите кнопку в том же столбце, который равен 0, он покажет только кнопку.
Слайд 21
![Изменение цвета текста и фона у Button](/_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/580878/slide-20.jpg)
Изменение цвета текста и фона у Button
Слайд 22
![Вы можете поменять цвет текста кнопки или любого другого виджета,](/_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/580878/slide-21.jpg)
Вы можете поменять цвет текста кнопки или любого другого виджета, используя
свойство fg.
Кроме того, вы можете поменять цвет фона любого виджета, используя свойство bg.
btn = Button(window, text="Не нажимать!", bg="black", fg="red“, width=15, height=5)
Слайд 23
![](/_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/580878/slide-22.jpg)
Слайд 24
![Теперь, если вы попытаетесь щелкнуть по кнопке, ничего не произойдет,](/_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/580878/slide-23.jpg)
Теперь, если вы попытаетесь щелкнуть по кнопке, ничего не произойдет, потому
что событие нажатия кнопки еще не написано.
Слайд 25
![Кнопка Click](/_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/580878/slide-24.jpg)
Слайд 26
![Для начала, мы запишем функцию, которую нужно выполнить при нажатии кнопки: def clicked(): lbl.configure(text="Я же просил...")](/_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/580878/slide-25.jpg)
Для начала, мы запишем функцию, которую нужно выполнить при нажатии кнопки:
def
clicked():
lbl.configure(text="Я же просил...")
Слайд 27
![Затем мы подключим ее с помощью кнопки, указав следующую функцию:](/_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/580878/slide-26.jpg)
Затем мы подключим ее с помощью кнопки, указав следующую функцию:
btn =
Button(window, text="Не нажимать!", command=clicked)
Обратите внимание: мы пишем clicked, а не clicked()с круглыми скобками. Теперь полный код будет выглядеть так:
Слайд 28
![](/_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/580878/slide-27.jpg)
Слайд 29
![Такие свойства как bg, fg, activebackground и activeforeground определяют соответственно](/_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/580878/slide-28.jpg)
Такие свойства как bg, fg, activebackground и activeforeground определяют соответственно цвет фона и текста, цвет фона и
текста во время нажатия мыши над кнопкой.
Слайд 30
![Здесь свойство command устанавливается с помощью метода config. Однако можно](/_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/580878/slide-29.jpg)
Здесь свойство command устанавливается с помощью метода config.
Однако можно было сделать и так: b1['command']
= change.
Слайд 31
![Для демонстрации запустить файл button изменение свойств при клике мыши](/_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/580878/slide-30.jpg)
Для демонстрации запустить файл button изменение свойств при клике мыши
Слайд 32
![Практическая работа Напишите программу, состоящую из семи кнопок, цвета которых](/_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/580878/slide-31.jpg)
Практическая работа
Напишите программу, состоящую из семи кнопок, цвета которых соответствуют цветам
радуги. При нажатии на ту или иную кнопку в текстовое поле должен вставляться код цвета, а в метку – название цвета.
Коды цветов в шестнадцатеричной кодировке: #ff0000 – красный, #ff7d00 – оранжевый, #ffff00 – желтый, #00ff00 – зеленый, #007dff – голубой, #0000ff – синий, #7d00ff – фиолетовый.
Слайд 33
![Для выравнивания строки по центру в текстовом поле используется свойство justify со значением CENTER.](/_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/580878/slide-32.jpg)
Для выравнивания строки по центру в текстовом поле
используется свойство justify со значением CENTER.
Слайд 34
![Получение ввода с использованием класса Entry (текстовое поле Tkinter)](/_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/580878/slide-33.jpg)
Получение ввода с использованием класса Entry (текстовое поле Tkinter)
Слайд 35
![В предыдущих примерах GUI Python мы ознакомились со способами добавления](/_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/580878/slide-34.jpg)
В предыдущих примерах GUI Python мы ознакомились со способами добавления простых
виджетов, а теперь попробуем получить пользовательский ввод, используя класс Tkinter Entry (текстовое поле Tkinter).
Вы можете создать текстовое поле с помощью класса Tkinter Entry следующим образом:
Слайд 36
![txt = Entry(window, width=10) Затем вы можете добавить его в](/_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/580878/slide-35.jpg)
txt = Entry(window, width=10)
Затем вы можете добавить его в окно,
используя функцию grid.
Наше окно будет выглядеть так:
Слайд 37
![](/_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/580878/slide-36.jpg)
Слайд 38
![Методы Entry e1=Entry(width=20) e1.insert( позиция, текст) – вставить с позиции](/_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/580878/slide-37.jpg)
Методы Entry
e1=Entry(width=20)
e1.insert( позиция, текст) – вставить с позиции
e1.delete(начало, конец) –
удалить
e1.get(начало, конец) – прочитать
Слайд 39
![вы можете получить текст ввода, используя функцию get. Мы можем](/_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/580878/slide-38.jpg)
вы можете получить текст ввода, используя функцию get. Мы можем записать код
для выбранной функции таким образом:
def clicked():
res = "Привет {}".format(txt.get()) lbl.configure(text=res)
Слайд 40
![](/_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/580878/slide-39.jpg)
Слайд 41
![Каждый раз, когда мы запускаем код, нам нужно нажать на](/_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/580878/slide-40.jpg)
Каждый раз, когда мы запускаем код, нам нужно нажать на виджет
ввода, чтобы настроить фокус на ввод текста, но как насчет автоматической настройки фокуса?
Слайд 42
![Установка фокуса виджета ввода](/_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/580878/slide-41.jpg)
Установка фокуса виджета ввода
Слайд 43
![Здесь все очень просто, ведь все, что нам нужно сделать,](/_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/580878/slide-42.jpg)
Здесь все очень просто, ведь все, что нам нужно сделать, —
это вызвать функцию focus:
txt.focus()
Когда вы запустите свой код, вы заметите, что виджет ввода в фокусе, который дает возможность сразу написать текст.
Отключить виджет ввода
Чтобы отключить виджет ввода, отключите свойство состояния:
txt = Entry(window,width=10, state='disabled')
Слайд 44
![](/_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/580878/slide-43.jpg)
Слайд 45
![](/_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/580878/slide-44.jpg)
Слайд 46
![](/_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/580878/slide-45.jpg)
Слайд 47
![Три способа конфигурирования свойств виджетов Изменять конфигурацию виджета можно в](/_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/580878/slide-46.jpg)
Три способа конфигурирования свойств виджетов
Изменять конфигурацию виджета можно в любой момент.
Это изменение прорисуется на экране по возвращении в цикл обработки событий
В момент создания виджета
btn = Button(window, text="Не нажимать!", bg="black", fg="red")
Слайд 48
![2. устанавливать (конфигурировать) с помощью методов config() (или configure())](/_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/580878/slide-47.jpg)
2. устанавливать (конфигурировать) с помощью методов config() (или configure())
Слайд 49
![](/_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/580878/slide-48.jpg)