Tkinter презентация

1. Программирование на Python

8 занятие. Графический интерфейс в tkinter

2.

Графический интерфейс с
помощью Tkinter

3. Создаем окно

Основополагающим элементом графического интерфейса Tkinter является окно(window). Окна — это
контейнеры, в которых живут все остальные элементы графического интерфейса. Эти другие элементы
графического интерфейса, такие как текстовые поля, метки и кнопки, известны как виджеты. Виджеты
находятся внутри окон.
Сначала импортируем Tkinter в Python:
Окно — это экземпляр класса Tkinter Tk. Идем дальше и
создаем новое окно и назначаем его переменной window:

4. Добавление виджета

Теперь, когда у нас есть окно, мы можем добавить виджет. Используем
класс tk.Label, чтобы добавить текст в окно. Создайте виджет Label с
текстом «Привет, Tkinter» и назначьте его переменной с именем greetings:
Созданное ранее окно не изменилось. Вы только что создали виджет Label,
но еще не добавили его в окно. Есть несколько способов добавить виджеты
в окно. Используем метод .pack() виджета Label:

5. Добавление виджета

Когда вы упаковываете виджет в окно, Tkinter делает размер окна
настолько маленьким, насколько это возможно, при этом полностью
охватывая виджет. Теперь выполните следующее:
Кажется, ничего не происходит, но обратите внимание, что в оболочке не
появляется новое приглашение.
window.mainloop() говорит Python запустить цикл обработки событий Tkinter.
Этот метод прослушивает события, такие как нажатия кнопок или клавиш, и
блокирует запуск любого кода, следующего за ним, до тех пор, пока вы не
закроете окно, в котором вызвали этот метод. Закройте окно, которое вы
создали, и вы увидите новое приглашение, отображаемое в оболочке.

6. Попробуйте сами

Напишите программу Python, которая создаёт окно Tkinter с текстом
«Python крутой».
Окно должно выглядеть примерно так:

7. Работаем с виджетами

Виджеты - это важная часть графического интерфейса tkinter. Благодаря им
происходит взаимодействие с пользователем. Вот несколько виджетов:
Label
Виджет для вывода текста на экран
Button
Кнопка, которая содержит текст и может
совершать действие при нажатии
Entry
Виджет ввода текста, который допускает
только одну строку текста
Text
Виджет ввода текста, который позволяет
вводить многострочный текст
Frame
Прямоугольная область, используемая
для группировки связанных виджетов или
обеспечения заполнения между
виджетами

8. Выводим текст и картинки с помощью виджета Label

Мы можем создать виджет Label, присвоив его переменной. Для
задания текста нужно в аргумент text передать строку с нашим
текстом.
Можно менять цвет текста и фона, используя foreground и
background:

9. Выводим текст и картинки с помощью виджета Label

Для задания цвета можно использовать шестнадцатеричное
значение RGB:
Вы можете настраивать высоту и ширину вашего блока с
текстом:
Вот как будет выглядеть наш блок:

10. Создаём кнопку с помощью виджета Button

К кнопке вы сможете привязывать свои функции, которые будут
выполняться при нажатии. Редактирование стиля кнопки
выглядит также, как и у текстового блока:
Так будет выглядеть ваша кнопка:

11. Пользовательский ввод с помощью виджета Entry

Когда мы хотим получить какой-то текст или email адрес, можно
использовать Entry. Он выведет вам небольшое поле для ввода
текста. Редактирование стиля происходит по уже известной
схеме:
Вот что у нас получится:

12. Пользовательский ввод с помощью виджета Entry

Конечно же основной интерес состоит в получении данных
из этой строки. Есть три основных операции:
• Считывание текста методом .get( )
• Удаление текста методом .delete( )
• Вставка текста методом .insert( )
Попробуем применить всё это на практике:
Вот, что должно получиться:

13. Пользовательский ввод с помощью виджета Entry

Чтобы считать текст из строки используем метод get( )
Это обязательно нужно делать после запуска программы в idle!
Вот, что получилось:
Давайте теперь попробуем удалить текст методом delete( ). Сам
метод принимает индекс символа, который нужно удалить.
Удалим первую букву имени:

14. Пользовательский ввод с помощью виджета Entry

Если вы хотите удалить сразу несколько символов, то нужно
задать промежуток в метод delete( ). Давайте удалим первые 3
буквы в имени:
Для удаления всей строки можно использовать следующую
команду:

15. Пользовательский ввод с помощью виджета Entry

Давайте теперь попробуем вставить текст в пустую строку. В
этом нам поможет метод insert( ). Сначала мы указываем на
какой индекс ставить строку, а затем саму строку:
Теперь попробуем добавить ещё одну строку в конец:

16. Получаем многострочный пользовательский ввод с помощью виджета Text

Text похож на Entry. С помощью него мы можем получать
многострочный текст. Здесь также можно использовать
предыдущие 3 метода: get( ), delete( ) и insert( ). Давайте
очистим наше окно и вставим текстовое поле:

17. Получаем многострочный пользовательский ввод с помощью виджета Text

Метод get( ) теперь требует задавать индекс начала и конца
строки в формате «Номер строки.Номер символа». Давайте
напишем текст и попробуем считать его:

18. Получаем многострочный пользовательский ввод с помощью виджета Text

Методу delete( ) надо задавать такие же аргументы, как в get( ):

19. Получаем многострочный пользовательский ввод с помощью виджета Text

И наконец давайте вставим текст методом insert( ). Сначала
вводим позицию, куда хотим вставить, а затем саму строку:

20. Заключаем виджеты в рамки с помощью виджета Frame

Frame виджет важен для организации макета вашего приложения.

21. Заключаем виджеты в рамки с помощью виджета Frame

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

22. Добавляем эффекты для фреймов

Можно добавить эффекты для границ фрейма. Вот какие виды
можно задать:
• tk.FLAT не имеет никаких эффектов (стандартное значение)
• tk.SUNKEN создает эффект углублённости
• tk.RAISED придает фрейму границу, которая заставляет его
«выпирать» с экрана.
• tk.GROOVE добавляет границу вокруг фрейма
• tk.RIDGE создает эффект приподнятости на границе
Далее мы посмотрим, как это выглядит на практике.

23. Добавляем эффекты для фреймов

24. Попробуйте сами

Напишите скрипт, который отображает виджет ввода
(Entry) шириной 40 единиц текста, белым фоном и
черным текстом. Используйте .insert( ) для отображения
текста в виджете с надписью "Как вас зовут?".
Должно получиться примерно так: