1 of 21

Алгоритми та програми

4.2. КНОПКА

Йосиф Ривкінд  /  Тетяна Лисенко

Людмила Чернікова  /  Віктор Шакотько

2 of 21

На цьому уроці ми вивчатимемо:

Алгоритми та програми /  Кнопка

Кнопка як елемент керування, її властивості та їх значення

Створення кнопки та способи її розміщення у вікні

Події, які можуть відбуватися з кнопкою

Обробники подій з кнопкою

3 of 21

ВЛАСТИВОСТІ КНОПКИ�

  • Які ви знаєте властивості вікна? Наведіть приклади їх значень.
  • Якою командою створюється та відкривається вікно?
  • Як змінити значення властивостей вікна?
  • Для чого використовують кнопку в проєктах?

Алгоритми та програми /  Кнопка

4 of 21

СТВОРЕННЯ КНОПКИ

Алгоритми та програми /  Кнопка

btn = Button()

Розмістити кнопку у вікні

btn.pack(pady=20)

Установити значення властивостей кнопки

btn = Button(text=“Ok”, width=5)

Створити об’єкт Кнопка

btn = Button()

5 of 21

ВЛАСТИВОСТІ КНОПКИ

Алгоритми та програми /  Кнопка

Властивість

Опис

Приклад

text

Текст на кнопці

text = “Обчислити”

width / height

Ширина / висота кнопки (кількість символів)

width = 10

height = 3

bg (background) / fg (foreground)

Колір фону / колір символів

bg = “blue”

fg = “yellow”

font

Шрифт – назва шрифту, розмір символів, накреслення (напівжирний – bold, курсив – italic, підкреслений – underline)

font = “Arial 14 italic”

state

Стан кнопки (звичайний – normal, недоступний – disable)

state = “disable”

6 of 21

ПРИКЛАД ВЛАСТИВОСТЕЙ КНОПКИ

btn = Button(text="Я - кнопка",

width=10,

fg="yellow",

bg = "blue",

font="Arial 14 italic")

Алгоритми та програми /  Кнопка

7 of 21

РОЗМІЩЕННЯ КНОПКИ У ВІКНІ

Методи розміщення кнопки у вікні :

  • pack() (англ. pack – упаковка) – кнопка автоматично розміщується під рядком заголовка вікна з однаковими відступами від лівої та правої межі вікна. Зміна відступів - властивість pady (англ. pad – відступ);
  • place(x = <відступ від лівої межі вікна>, y = <відступ від верхньої межі вікна>) (англ. place – місце) – верхня ліва вершина кнопки розміщується в точці вікна із заданими координатами х та у.

​

Початок системи координат у вікні – в лівій верхній вершині, вісь х – горизонтально вправо, вісь у – вертикально вниз.

Алгоритми та програми /  Кнопка

btn.place(x = 20, y = 50)

8 of 21

ПРОЄКТ З КНОПКОЮ

from tkinter import *

root = Tk()

root.geometry("300x200")

btn = Button(text="Я - кнопка",

width=10,

fg="yellow",

bg = "blue",

font="Arial 20 italic")

btn.pack(pady = 50)

​

Якщо проєкт буде створено в онлайн середовищі, то потрібна команда:

root.mainloop()

Алгоритми та програми /  Кнопка

9 of 21

ПОДІЇ З КНОПКОЮ. ОБРОБНИКИ ПОДІЙ ДЛЯ КНОПКИ

  • Які події можуть відбуватися з вікном проєкту?
  • Що таке обробник події?
  • Як записується обробник події у проєкті та як він виконується? �

Алгоритми та програми /  Кнопка

10 of 21

Виконайте вправу в інтернеті

Поясніть складові команди, яка пов'язує обробник події з елементом графічного інтерфейсу

https://learningapps.org/watch?v=p1rkn8n7k25

Вправа «Пов'язування подій з об'єктом у мові Python»

Алгоритми та програми /  Кнопка

11 of 21

Виконайте вправу в інтернеті

Установіть відповідність між подіями та їх позначенням в мові Python

https://learningapps.org/watch?v=pnbb9ii4k25

Вправа «Позначення подій в мові Python»

Алгоритми та програми /  Кнопка

12 of 21

ОБРОБНИКИ ПОДІЙ З КНОПКАМИ

Алгоритми та програми /  Кнопка

СПОСІБ 1

СПОСІБ 2

13 of 21

Виберіть відповіді на запитання

Які команди призначені для створення кнопки?

root = Tk()

btn = Button(text=“Ok",

width=10)

btn = Button()

root.geometry("300x200")

btn.pack(pady = 50)

Алгоритми та програми /  Кнопка

14 of 21

Виберіть відповіді на запитання

Які команди призначені для установлення значень властивостей кнопки з іменем btn, що відрізняються від значень за замовчуванням?

btn[‘width’] = 10

btn = Button(text=“Ok", width=10)

btn = Button()

root.geometry("300x200")

root[‘bg’] = ‘green’

Алгоритми та програми /  Кнопка

15 of 21

Виберіть відповіді на запитання

Які команди призначені для розміщення кнопки з іменем btn у вікні?

root.geometry("300x200")

btn = Button()

btn.place(x = 50, y = 30)

btn = Button(text=“Ok", width=10)

btn.pack(pady = 50)

Алгоритми та програми /  Кнопка

16 of 21

Виберіть відповіді на запитання

Які команди призначені для пов’язування з кнопкою з іменем btn обробника події клацання лівої кнопки миші click?

root.geometry("300x200")

btn.bind(“<1>”, click)

btn.place(x = 50, y = 30)

btn = Button(text=“Ok",

width=10, command = click)

btn.pack(pady = 50)

Алгоритми та програми /  Кнопка

17 of 21

Створення проєкту з кнопкою

Алгоритми та програми /  Кнопка

Перегляньте відео

Завдання

Створити проєкт, у якому в результаті настання події Click для кнопки:

  • її ширина стане 10 символів,
  • висота 3 символи,
  • зміниться текст на кнопці на слово «Україна».

18 of 21

Виконайте вправу в інтернеті

Установіть правильну послідовність команд проєкту, який містить кнопку

https://learningapps.org/watch?v=paait7g4k25

Вправа «Створення кнопки в комп'ютерному проєкті»

Алгоритми та програми /  Кнопка

19 of 21

Виконайте вправу в інтернеті

Установіть відповідність між командами проєкту та їх призначенням

https://learningapps.org/watch?v=p240b1vua25

Вправа «Команди в комп'ютерному проєкті»

Алгоритми та програми /  Кнопка

20 of 21

Виконайте завдання в інтернеті

У вікні розміщено кнопку "День", після вибору якої колір фону вікна стає білим.

Додайте команди для розміщення у вікні кнопки "Ніч", після вибору якої колір фону вікна стане темно-синім (darkblue).

https://codehs.com/sandbox/tlysenko/task-for-42

Завдання «День і ніч»

Алгоритми та програми /  Кнопка

21 of 21

Успіхів вам

у навчанні!

Йосиф Ривкінд  /  Тетяна Лисенко  /  Людмила Чернікова  /  Віктор Шакотько