Учебник Python 3

Визуализация калькулятора

На этом занятии создадим три визуальных представления калькулятора, используя отдельно три разных типа разметки: pack(), place(), grid(). Создадим окно:

from tkinter import *

root = Tk()
root.title("Calculator")
root.mainloop()
1
2
3
4
5

Можно задать размер и запретить изменение размера окна, добавив соответствующие строки:

root.geometry("400x300")
root.resizable(False, False)
1
2

Метод - pack()

Для дальнейшего переиспользования кода, создайте новый файл с названием app_calculator_pack.py.

Создадим в окне визуальный элемент однострочное текстовое поле:

num = StringVar() # создадим переменную для отображения значений на табло калькулятора
num.set(0)        # установим значение переменной равное 0
label = Entry(text=num, justify=RIGHT)
label.pack()
1
2
3
4

Результат выполнения:

01_calc

Теперь создадим кнопку добавив следующий код:

Button(text=1).pack(side=LEFT)
1

Результат выполнения:

02_calc

Добавим другие необходимые кнопки и получим следующий вид нашего калькулятора:

03_calc

Разместим кнопки в три ряда. Для этого нам нужно воспользоваться вспомогательным виджетом Frame(). Для наглядности визуализации использую LabelFrame(). Важно соблюдать правильный порядок создания и размещения элементов! Логика создания элементов следующая:

  • создаем рамку;
  • создаем виджеты, которые будем хранить в нашей рамке и размещаем их в ней указав имя переменной, нашей рамки и упаковав виджет;
  • пакуем нашу рамку в окно;

Код может выглядеть так:

from tkinter import *

root = Tk()
frame_entry = LabelFrame(root, text="1 ряд")
frame_entry.pack()
label = Entry(frame_entry)
label.pack()
root.mainloop()
1
2
3
4
5
6
7
8

Результат выполнения:

04_calc

После преобразования разметки с использованием рамки - LabelFrame() калькулятор должен иметь вид подобный следующему:

05_calc

При использовании Frame() - рамки без подписей, виджеты должны просто располагаться рядами: вплотную друг к другу.

Метод - place()

Для дальнейшего переиспользования кода, создайте новый файл с названием app_calculator_place.py.

Используя метод place() - места для размещения виджетов в окне достаточно указать абсолютное значение положения виджета от верхнего левого угла окна.

Пример кода может быть таким:

Button(text=1).place(x=10, y=50)
1

где x - расстояние горизонтали, а y - по вертикали.

Если смещение задать по 50 пикселей, то созданное окно может иметь вид:

06_calc

Метод - grid()

Для дальнейшего переиспользования кода, создайте новый файл с названием app_calculator_grid.py.

grid() - сетка, может являть наиболее удобным для создания сложных интерфейсов, т.к. проще в реализации, понимании и масштабируемости.

Пример кода с необходимыми атрибутами для решения задачи:

entry_display = Entry(textvariable=num, justify=RIGHT)
entry_display.grid(column=0, row=0, columnspan=5, sticky=NSEW)
1
2

При правильной полной реализации написания интерфейса результат может быть:

07_calc

Современная визуализация

ttk (themed tk) - это расширение tk с новым набором виджетов. В ttk используется новый движок для создания виджетов. Этот движок обладает поддержкой тем и стилей оформления. Благодаря этому виджеты ttk выглядят более естественно в различных операционных системах.

Начиная с версий python 2.7 и 3.1.2 в tkinter включён модуль для работы с ttk.

В ttk включены следующие виджеты, которые можно использовать вместо соответствующих виджетов tk: Button, Checkbutton, Entry, Frame, Label, LabelFrame, Menubutton, PanedWindow, Radiobutton, Scale и Scrollbar. Кроме того имеется несколько новых виджетов: Combobox, Notebook, Progressbar, Separator, Sizegrip и Treeview.

Чтобы переопределить основные виджеты Tk, импорт ttk должен следовать за импортом Tk:

from tkinter import *
from tkinter.ttk import *
1
2

Добавьте данные строки во все решения ваших калькуляторов и обратите внимания как измениться их внешний вид.

Вид калькулятора с методом pack() и виджетами ttk:

08_calc_ttk

Вид калькулятора с методом place() и виджетами ttk:

09_calc_ttk

Как мы видим после применения метода абсолютного позиционирования, проявляется основной недостаток: проблема масштабирования.

Вид калькулятора с методом grid() и виджетами ttk:

10_calc_ttk

ПРИМЕЧАНИЕ

Нельзя использовать разные методы позиционирования элементов: pack(), grid(), place() в одном окне или одном фрейме!

Упражнения

  1. Для дальнейшего переиспользования кода, создайте новый файл с названием app_calculator_windows.py. Создайте калькулятор подобного вида, выбрав для этого наиболее удобный способ:

    11_calc_win

    Символы «плюс минус» и «корня» можно получить, воспользовавшись функцией print():

    print(chr(177))
print(chr(8730))
    1
    2

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

  3. Добавьте функцию очистки экрана калькулятора для клавиши C: при нажатии кнопки происходит стирание содержимого дисплея и отображение 0.

  4. Реализуйте работу кнопки <--, добавьте функцию удаления последнего символа на дисплее. Следует учесть, что бы при удалении последней цифры, на дисплее отображался 0.

  5. Реализовать функцию . - точки для записи дробного числа. Реализовать проверку для ограничения множественного ввода символа для одного числа.

  6. Реализовать вывод примеров на дисплее: 23+5 и т.п.

  7. Используя встроенную функцию eval("23+5"), которая принимает пример в виде строки, вычисляет его и возвращает результат. Реализуйте работу кнопки равно использую указанную функцию.

  8. Реализуйте работу кнопки деления.