1 of 17

Урок 60��Основи графічного інтерфейсу користувача. Графічні об’єкти та їх властивості: створення вікна, створення кнопок, мітки, однорядкового текстового поля, багаторядкового текстового поля

Підготували: вчителі інформатики Черкаської ЗОШ №33 Літвінова О.М., Максюта Л.В., вчителі інформатики Першої міської гімназії Чех О.І., Коваленко Є.О.

2 of 17

Середовище для програмування Python з модулем tkinter

ОНЛАЙН

Посилання на середовище для програмування Python – онлайн із модулем tkinter:

https://replit.com/

Відеоінструкція по роботі з replit

​

МОБІЛЬНИЙ ПРИСТРІЙ

Посилання на додаток у Play маркет:

https://play.google.com/store/apps/details?id=ru.iiec.pydroid3&hl=uk

Відеоінструкція

​

КОМП’ЮТЕР

Посилання на сайт для завантаження і встановлення середовища Тhonny: https://thonny.org/

​

3 of 17

2. Графічні об’єкти та їх властивості

  1. Tk() - Вікно. Діалогове вікно призначене для виведення повідомлень користувачу.
  2. Button() - Кнопки. Використовують для управління програмою. Відповідає клас Button.
  3. Label() - Мітки (написи). Використовуються для інформування користувача про результати виконання програмою дій або про ті дії, які має виконати користувач.
  4. Entry() - Однорядкове текстове поле використовується користувачем для введення користувачем тексту в один рядок.
  5. Text() -Багаторядкове текстове поле. Призначено для введення великого тексту.

4 of 17

Метод pack()

Для позиціонування елементів у вікні застосовуються різні способи, і найпростіший спосіб представляє виклик у елемента методу pack (). Цей метод приймає такі параметри:

  • expand: якщо одно True, то віджет заповнює весь простір контейнера.
  • fill: визначає, чи буде віджет розтягуватися, щоб заповнити вільний простір навколо. Цей параметр може набувати таких значень: NONE (за замовчуванням, елемент не розтягується), X (елемент розтягується тільки по горизонталі), Y (елемент розтягується тільки по вертикалі) і BOTH (елемент розтягується по вертикалі і горизонталі).
  • side: вирівнює віджет по одній зі сторін контейнера. Може приймати значення: TOP (за замовчуванням, вирівнюється по верхній стороні контейнера), BOTTOM (вирівнювання по нижньому боці), LEFT (вирівнювання по лівій стороні), RIGHT (вирівнювання по правій стороні).

5 of 17

Приклад №1. Вікно - Tk()

Бібліотека tkinter застосовується для створення зручних вікон користувацького інтерфейсу.

Базовим моментом в побудові графічних програм є створення вікна. Потім у вікно додаються всі інші компоненти графічного інтерфейсу.

Для створення найпростішого вікна використовуємо наступний скрипт:

​

�

Код програми

Результати виконання

from tkinter import *

window = Tk()

window.title("Графічна програма на Python")

window.geometry("400x300")

window.mainloop()

​

​

6 of 17

Приклад №2. Кнопки - Button()

Бібліотека tkinter містить набір компонентів або віджетів (об’єктів), одним з яких є кнопка. Додавання кнопки в вікно:

​

​

​

​

​

​

Для створення кнопки використовується конструктор Button (). У цьому конструкторі за допомогою параметра text можна встановити текст кнопки.

Щоб зробити елемент видимим, у нього викликається метод pack ().

Код програми

Результати виконання

from tkinter import *

root = Tk()

root.title("Програмую на Python")

root.geometry("300x300")

btn = Button(text="Hello")

btn.pack()

root.mainloop()

​

​

7 of 17

Приклад №3. Кнопки - Button()

Кожен віджет, в тому числі кнопка, має ряд атрибутів, які впливають на її візуалізацію, і які ми можемо налаштувати через конструктор:

​

Код програми

Результати виконання

​

​

​

8 of 17

2. Графічні об’єкти та їх властивості. Мітки (написи) - Label()

Текстові мітки (написи) в Python представлені елементом Label.

Цей елемент дозволяє виводити статичний текст без можливості редагування. �Для створення елемента Label застосовується конструктор, який приймає два параметри:

Label(master, options)

Параметр master представляє посилання на батьківський контейнер (вікно до якого належить),

а параметр options подає такі іменовані параметри:

  • anchor: встановлює позиціонування тексту;
  • bg / background: фоновий колір;
  • bitmap: посилання на зображення, яке відображається на мітці;
  • bd: товщина кордону мітки;
  • fg / foreground: колір тексту;
  • font: шрифт тексту, наприклад, font = "Arial 14" - шрифт Arial висотою 14px height: висота елемента)

​

9 of 17

Приклад №4. Мітки (Написи) - Label()

Код програми

Результати виконання

​

​

10 of 17

3. Графічні об’єкти та їх властивості. Однорядкове текстове поле - Entry()�

Елемент Entry представляє поле для введення тексту. Конструктор Entry приймає такі параметри:

  • bg: фоновий колір
  • bd: товщина межі
  • cursor: курсор покажчика миші при наведенні на текстове поле
  • fg: колір тексту
  • font: шрифт тексту
  • justify: встановлює вирівнювання тексту. Значення LEFT вирівнює текст по лівому краю, CENTER - по центру, RIGHT - по правому краю.
  • relief: визначає тип межі, за замовчуванням значення FLAT
  • selectbackground: фоновий колір виділеної частини тексту

11 of 17

3. Графічні об’єкти та їх властивості. Однорядкове текстове поле - Entry()�

  • selectforeground: колір виділеного тексту
  • show: задає маску для символів, що вводять
  • state: стан елемента, може приймати значення NORMAL (за замовчуванням) і DISABLED
  • textvariable: встановлює прив'язку до елементу StringVar
  • width: ширина елемента

12 of 17

Приклад №5.1. Однорядкове текстове поле - Entry()�

Спосіб 1. Визначимо елемент Entry і після натискання на кнопку виведемо його текст в окреме вікно з повідомленням:

​

​

Код програми

Результати виконання

​

​

13 of 17

Приклад №5.2. Однорядкове текстове поле - Entry()�

Спосіб 2. Визначимо елемент Entry і після натискання на кнопку виведемо його текст в окреме вікно з повідомленням:

​

​

Код програми

Результати виконання

​

​

14 of 17

Однорядкове текстове поле - Entry(). Методи.

Елемент Entry має ряд методів. Основні з них:

  • insert (index, str): вставляє в текстове поле рядок за певним індексом
  • get (): повертає введений в текстове поле текст
  • delete (first, last = None): видаляє символ за індексом first. Якщо вказано параметр last, то видалення проводиться до індексу last. Щоб видалити до кінця, як другий параметр можна використовувати значення END.

​

�

15 of 17

4. Створення багаторядкового текстового поля - Text()

Text - багаторядкове текстове поле. Цей віджет часто зустрічається

при заповненні веб-форм.

У tkinter багаторядкове текстове поле створюється від класу Text. За замовчуванням його розмір дорівнює 80 символів по горизонталі і 24 символи по вертикалі.

from tkinter import *

root = Tk()

text = Text(width=25, height=5, bg="white", fg='red', wrap=WORD)

text.pack()

root.mainloop()

Значення WORD опції wrap дозволяє переносити слова на новий рядок цілком, а не по буквах.

Text і Scrollbar якщо в текстове поле вводиться більше ліній тексту, ніж його висота, то воно саме буде прокручуватися вниз. При перегляді прокручувати вгору-вниз можна за допомогою колеса миші і стрілками на клавіатурі. Однак буває зручніше користуватися скроллером - смугою прокрутки. У tkinter скролери виробляються від класу Scrollbar. Об'єкт-скроллер пов'язують з віджетом, якому він потрібен.

16 of 17

Приклад №9. Приклад використання методу pack

17 of 17

Використані джерела:

  1. Руденко В.Д., Жугастров О.О. Інформатика. Основи алгоритмізації і програмування мовою Python. – Харків: «Ранок», 2019
  2. Морзе Н.В.. Барна О.В., Вембер В.П. Інформатика. Підручник для 8 класу. – К.: «Оріон», 2016
  3. Морзе Н.В.. Барна О.В., Вембер В.П. Інформатика. Підручник для 9 класу. – К.: «Оріон», 2017
  4. METANIT.COM. Сайт о программировании
  5. Програмування в школі. Блог
  6. ВІКІ ЦДПУ. Програмуємо разом.
  7. Лаборатория линуксоида
  8. Путівник мовою програмування Python
  9. https://www.delftstack.com

​