Пусть в окне приложения располагаются текстовое поле (entry), метка (label) и кнопка (button). У виджетов много свойств: размер, цвет фона, цвет надписи, размер шрифта, текст надписи и др.
Примеры:
e = Entry(root, width=20)
b = Button(root, text="Преобразовать")
l1 = Label(root, bg=‘red', fg='white', width=20)
l2 = Label(text="Распознавание образов", font=("Comic Sans MS", 24, "bold"))

Button (root, options)

btn = Button(text="Hello",  # текст кнопки
                      background="#555",   # фоновый цвет кнопки
                      foreground="#ccc", # цвет текста
                      padx="20", # отступ от границ до содержимого по   горизонтали
                      pady="8",   # отступ от границ до содержимого по   вертикали
                      font="16"  # высота шрифта)
btn.pack()
Чтобы сделать элемент видимым, вызывается метод pack().

Button  - Options

activebackground: цвет кнопки, когда она находится в нажатом состоянии
activeforeground: цвет текста кнопки, когда она в нажатом состоянии
bd: толщина границы (по умолчанию 2)
bg/background: фоновый цвет кнопки
fg/foreground: цвет текста кнопки
font: например, font="Arial 14"  или font=("Verdana", 13, "bold") 
height: высота кнопки
highlightcolor: цвет кнопки, когда она в фокусе
image: изображение на кнопке
justify: устанавливает выравнивание текста. LEFT,  CENTER, RIGHT .
padx: отступ от границ кнопки до ее текста справа и слева
pady: отступ от границ кнопки до ее текста сверху и снизу
relief: тип границы, SUNKEN, RAISED, GROOVE, RIDGE
state: устанавливает состояние кнопки, может принимать значения DISABLED, ACTIVE, NORMAL (по умолчанию)
text: устанавливает текст кнопки
textvariable: устанавливает привязку к элементу StringVar
width: ширина кнопки
wraplength: при значении >0  строки текста будут вмещаться в пространство кнопки

Обработка нажатия на кнопку

Для обработки нажатия на кнопку необходимо установить в конструкторе параметр command, присвоив ему ссылку на функцию, которая будет срабатывать при нажатии:

def click_button():
      global clicks
      clicks += 1

btn = Button(text="Click Me", background="#555", foreground="#ccc", padx="20", pady="8", font="16", command=click_button)

Label(root, options)

label1 = Label(text="Привет", fg="#eee", bg="#333")
label1.pack()
poetry = "Вот мысль, которой весь я предан,\n Итог всего, что ум скопил.\n Лишь тот, кем бой за жизнь изведан,\n Жизнь и свободу заслужил."
label2 = Label(text=poetry, justify=LEFT)
label2.pack()

\n - Перевод на следующую строку

Label - Options

anchor: устанавливает позиционирование текста (n, s, w, e, ne, nw, se, sw)
bg/background: фоновый цвет
bitmap: ссылка на изображение, которое отображается на метке
bd: толщина границы метки
fg/foreground: цвет текста
font: шрифт текста, например, font="Arial 14" - шрифт Arial высотой 14px
height: высота элемента
cursor: курсор указателя мыши при наведении на метку
image: ссылка на изображение, которое отображается на метке
justify: устанавливает выравнивание текста. Значение LEFT выравнивает текст по левому краю, CENTER - по центру, RIGHT - по правому краю
padx: отступ от границ элемента до его текста справа и слева
pady: отступ от границ элемента до его текста сверху и снизу
relief: определяет тип границы, по умолчанию значение FLAT
text: устанавливает текст метки
textvariable: устанавливает привязку к элементу StringVar
width: ширина элемента
wraplength: при положительном значении строки текста будут переносится для вмещения в пространство элемента

 

Entry (root, options)

e1 = Entry(fg="#eee", bg="#333")
e1.pack()
t = "Привет!"
e2 = Entry(text=t, justify=LEFT)
e2.pack()

Entry - Options

bg: фоновый цвет
bd: толщина границы
cursor: курсор указателя мыши при наведении на текстовое поле
fg: цвет текста
font: шрифт текста
justify: устанавливает выравнивание текста. Значение LEFT выравнивает текст по левому краю, CENTER - по центру, RIGHT - по правому краю
relief: определяет тип границы, по умолчанию значение FLAT
selectbackground: фоновый цвет выделенного куска текста
selectforeground: цвет выделенного текста
show: задает маску для вводимых символов
state: состояние элемента, может принимать значения NORMAL (по умолчанию) и DISABLED
textvariable: устанавливает привязку к элементу StringVar
width: ширина элемента

Методы Entry

Элемент Entry имеет ряд методов. Основные из них:
insert(index, str): вставляет в текстовое поле строку по определенному индексу
get(): возвращает введенный в текстовое поле текст
delete (first, last=None): удаляет символ по индексу first. Если указан параметр last, то удаление производится до индекса last. Чтобы удалить до конца, в качестве второго параметра можно использовать значение END.
Примеры:
е1.insert(0, "Tom")
е2.insert(0, "Soyer")

def clear():
     е1.delete(0, END)
     е2.delete(0, END)

def display():
     messagebox.showinfo(“Приветствие”, e1.get() + " " + e2.get())

Практическая работа 1

«A»: Создайте окно программы 200 на 250 по центру экрана.

«B»: Дополните окно семью кнопками, цвета которых соответствуют цветам радуги и одной меткой. 

«C»: Напишите программу, которая выводит цвет кнопки в метке и код цвета в метке.
Коды цветов в шестнадцатеричной кодировке: #ff0000 – красный, #ff7d00 – оранжевый, #ffff00 – желтый, #00ff00 – зеленый, #007dff – голубой, #0000ff – синий, #7d00ff – фиолетовый.

Смотреть встроенную онлайн галерею в:
https://klub-kod.ru/python/tkinter#sigProId799c208f17



 

Метод pack

Этот метод принимает следующие параметры:

expand: если равно True, то виджет заполняет все пространство контейнера.

fill: Этот параметр может принимать следующие значения: NONE (по умолчанию, элемент не растягивается), X (по горизонтали), Y (по вертикали) и BOTH (элемент растягивается по вертикали и горизонтали).

side: выравнивает виджет по одной из сторон контейнера. Может принимать значения: TOP (по верхней стороне контейнера), BOTTOM (по нижней стороне), LEFT (по левой стороне), RIGHT (по правой стороне).

Метод place

height и width: высота и ширина элемента в пикселях

relheight и relwidth: задают соответственно высоту и ширину элемента, но в качестве значения используется число float в промежутке между 0.0 и 1.0, которое указывает на долю от высоты и ширины родительского контейнера

x и y: смещение элемента по горизонтали и вертикали в пикселях соответственно относительно верхнего левого угла контейнера

relx и rely: смещение элемента по горизонтали и вертикали, но в качестве значения используется число float в промежутке между 0.0 и 1.0, которое указывает на долю от высоты и ширины родительского контейнера

bordermode: задает формат границы элемента.  INSIDE (по умолчанию) и OUTSIDE

anchor: Растяжения элемента. Может принимать значения n, e, s, w, ne, nw, se, sw, c, которые являются сокращениями от Noth(север - вверх), South (юг - низ), East (восток - правая сторона), West (запад - левая сторона) и Center (по центру).

Метод grid

Метод grid применяет следующие параметры:

column: номер столбца, отсчет начинается с нуля

row: номер строки, отсчет начинается с нуля

columnspan: сколько столбцов должен занимать элемент

rowspan: сколько строк должен занимать элемент

ipadx и ipady: отступы по горизонтали и вертикали соответственно от границ элемента до его текста

padx и pady: отступы по горизонтали и вертикали

sticky: выравнивание элемента в ячейке. Может принимать значения n, s, w, e, ne, nw, se, sw, соответствующее направление выравнивания.

Практическая работа 2

«A»:  Напишите программу, которая выводит цвет кнопки в метке и код цвета в метке. Кнопки располагаются в строку.
Коды цветов в шестнадцатеричной кодировке: #ff0000 – красный, #ff7d00 – оранжевый,  #ffff00 – желтый, #00ff00 – зеленый,  #007dff – голубой, #0000ff – синий, #7d00ff – фиолетовый.

«В»: Создайте окно с одной меткой для вывода ответов, двумя текстовыми полями и четырьмя кнопками математических действий: +, - , ∙ , :

«C»:  Напишите простейший калькулятор, состоящий из двух текстовых полей, куда пользователь вводит числа, и четырех кнопок "+", "-", "*", "/". Результат вычисления должен отображаться в метке. Если арифметическое действие выполнить невозможно (например, если были введены буквы, а не числа), то в метке должно появляться слово "ошибка".

«D»: Дополните калькулятор действиями возведения в степень, извлечения квадратного корня. Создайте кнопку Clear.

Смотреть встроенную онлайн галерею в:
https://klub-kod.ru/python/tkinter#sigProId5d9839cb0f
 

 

GUI Библиотека Tkinter

Tkinter – это пакет для Python, предназначенный для работы с библиотекой Tk. Библиотека Tk содержит компоненты графического интерфейса пользователя (graphical user interface – GUI), написанные на языке программирования Tcl. Tkinter реализован как оболочка Python для Tcl интерпретатора, встроенного в интерпретатор Python. Существует и несколько других популярных графических инструментов для Python. Наиболее популярными являются wxPython, PyQt и PyGTK.

GUI (графический интерфейс )

Под графическим интерфейсом пользователя (GUI) подразумеваются все те окна, кнопки, текстовые поля для ввода, скроллеры, списки, радиокнопки, флажки и др., которые вы видите на экране, открывая то или иное приложение. Через них вы взаимодействуете с программой и управляете ею. Все эти элементы интерфейса вместе будем называть виджетами (widgets).

Как написать GUI -программу?

  • Создать главное окно.
  • Создать виджеты и выполнить конфигурацию их свойств (опций).
  • Определить события, то есть то, на что будет реагировать программа.
  • Определить обработчики событий, то есть то, как будет реагировать программа.
  • Расположить виджеты в главном окне.
  • Запустить цикл обработки событий.

Главное окно

Tkinter импортируется стандартно для модуля Python from tkinter import *. Объект окна верхнего уровня создается от класса Tk модуля tkinter. Переменную, связываемую с объектом, часто называют root (корень): 
root = Tk()
В этом окне располагаются все остальные виджеты.

Первая программа с GUI

from tkinter import *
root=Tk()
root.mainloop()

Последняя строка вызывает функцию mainloop. Эта функция вызывает бесконечный цикл окна, поэтому окно будет ждать любого взаимодействия с пользователем, пока не будет закрыто.

Свойства окна

root.title("Моя программа")  # заголовок окна
root.geometry('500x150')  # размеры окна
root.geometry('600x400+200+100')  # ширина, высота окна и его смещение от верхней левой точки экрана
root.update_idletasks()  # данный метод перезагружает данные об окне после размещения виджетов

Методы winfo_screenwidth() и winfo_screenheight()

Чтобы окно появлялось в центре экрана. Рассмотрим, как поместить окно в центр, если размер окна известен:

w = root.winfo_screenwidth() # ширина экрана
h = root.winfo_screenheight() # высота экрана
w = w//2 -200 # середина экрана - половина ширины окна
h = h//2 - 100 # середина экрана - половина высоты окна
root.geometry('400x200+{}+{}'.format(w, h)) 

 

from tkinter import *
from math import sqrt
   
root=Tk()
root.title("Калькулятор")
w = root.winfo_screenwidth() # ширина экрана
h = root.winfo_screenheight() # высота экрана
w = w//2 -125 # середина экрана - половина ширины окна
h = h//2 - 50 # середина экрана - половина высоты окна 
root.geometry('240x100+{}+{}'.format(w,h))

def Plus():
    L.configure (text="{}+{}={}".format(e1.get(), e2.get(),int(e1.get())+int(e2.get())))
def Minus():
    L.configure (text="{}-{}={}".format(e1.get(), e2.get(),int(e1.get())-int(e2.get())))
def Umn():
    L.configure (text="{}*{}={}".format(e1.get(), e2.get(),int(e1.get())*int(e2.get())))
def Delenie():
    if int(e2.get())==0:
           L.configure (text="Делить на нуль нельзя!")
    else:
           L.configure (text="{}:{}={}".format(e1.get(), e2.get(),int(e1.get())/int(e2.get())))
def stepen():
           L.configure (text="{}^{}={}".format(e1.get(), e2.get(),int(e1.get())**int(e2.get())))
def koren():
    if int(e1.get())<0:
           L.configure (text="Ошибка! Корень из отрицательного числа!")
    else:
           L.configure (text="Корень из {} = {}".format(e1.get(), sqrt(int(e1.get()))))
def cl():
    L.configure (text="0")
    e1.delete(0,END)
    e2.delete(0,END)
    e1.insert(0,0)
    e2.insert(0,0)

L = Label(text = "0", bg="#ffffff", width=33, anchor=E)
L.grid(row=1,column=0,columnspan=3)  

e1 = Entry(text="", width = 12)
e1.grid(row=0,column=0)
e2 = Entry(text="", width = 12)
e2.grid(row=0,column=1)
  
b1 = Button(text="+", width = 10, command=Plus)
b1.grid(row=2,column=0)
b2 = Button(text="-", width = 10, command=Minus)
b2.grid(row=2,column=1)
b3 = Button(text="*", width = 10, command=Umn)
b3.grid(row=2,column=2)
b4 = Button(text=":", width = 10, command=Delenie)
b4.grid(row=3,column=0)
b5 = Button(text="^", width = 10, command=stepen)
b5.grid(row=3,column=1)
b6 = Button(text="Корень", width = 10, command=koren)
b6.grid(row=3,column=2)
b6 = Button(text="Clear", width = 10, command=cl)
b6.grid(row=0,column=2)

root.mainloop() 

РСЯ футер

© 2017 Компьютерный клуб "КОД". Все права защищены.