qt designer создание меню
Python GUI: создаём простое приложение с PyQt и Qt Designer
Авторизуйтесь
Python GUI: создаём простое приложение с PyQt и Qt Designer
Эта статья предназначена для тех, кто только начинает своё знакомство с созданием приложений с графическим интерфейсом (GUI) на Python. В ней мы рассмотрим основы использования PyQt в связке с Qt Designer. Шаг за шагом мы создадим простое Python GUI приложение, которое будет отображать содержимое выбранной директории.
Что нам потребуется
Нам понадобятся PyQt и Qt Designer, ну и Python, само собой.
В этой статье используется PyQt5 с Python 3, но особых различий между PyQt и PySide или их версиями для Python 2 нет.
Windows: PyQt можно скачать здесь. В комплекте с ним идёт Qt Designer.
macOS: Вы можете установить PyQt с помощью Homebrew:
$ brew install pyqt5
Скачать пакет с большинством компонентов и инструментов Qt, который содержит Qt Designer, можно по этой ссылке.
Linux: Всё нужное, вероятно, есть в репозиториях вашего дистрибутива. Qt Designer можно установить из Центра Приложений, но PyQt придётся устанавливать через терминал. Установить всё, что нам понадобится, одной командой можно, например, так:
Если вы видите сообщение, что такой команды нет или что-то в таком роде, попробуйте загуглить решение проблемы для вашей операционной системы и версии PyQt.
Дизайн
Основы
Теперь, когда у нас всё готово к работе, давайте начнём с простого дизайна.
15–17 ноября, Онлайн, Беcплатно
Откройте Qt Designer, где вы увидите диалог новой формы, выберите Main Window и нажмите Create.
После этого у вас должна появиться форма — шаблон для окна, размер которого можно менять и куда можно вставлять объекты из окна виджетов и т.д. Ознакомьтесь с интерфейсом, он довольно простой.
Теперь давайте немного изменим размер нашего главного окна, т.к. нам не нужно, чтобы оно было таким большим. А ещё давайте уберём автоматически добавленное меню и строку состояния, поскольку в нашем приложении они не пригодятся.
Все элементы формы и их иерархия по умолчанию отображаются в правой части окна Qt Designer под названием Object Inspector. Вы с лёгкостью можете удалять объекты, кликая по ним правой кнопкой мыши в этом окне. Или же вы можете выбрать их в основной форме и нажать клавишу DEL на клавиатуре.
Теперь перетащите куда-нибудь в основную форму List Widget (не List View) и Push Button из Widget Box.
Макеты
Вместо использования фиксированных позиций и размеров элементов в приложении лучше использовать макеты. Фиксированные позиции и размеры у вас будут выглядеть хорошо (пока вы не измените размер окна), но вы никогда не можете быть уверены, что всё будет точно так же на других машинах и/или операционных системах.
Макеты представляют собой контейнеры для виджетов, которые будут удерживать их на определённой позиции относительно других элементов. Поэтому при изменении размера окна размер виджетов тоже будет меняться.
Давайте создадим нашу первую форму без использования макетов. Перетащите список и кнопку в форме и измените их размер, чтобы вышло вот так:
Теперь в меню Qt Designer нажмите Form, затем выберите Preview и увидите что-то похожее на скриншот выше. Выглядит хорошо, не так ли? Но вот что случится, когда мы изменим размер окна:
Наши объекты остались на тех же местах и сохранили свои размеры, несмотря на то что размер основного окна изменился и кнопку почти не видно. Вот поэтому в большинстве случаев стоит использовать макеты. Конечно, бывают случаи, когда вам, например, нужна фиксированная или минимальная/максимальная ширина объекта. Но вообще при разработке приложения лучше использовать макеты.
Основное окно уже поддерживает макеты, поэтому нам ничего не нужно добавлять в нашу форму. Просто кликните правой кнопкой мыши по Main Window в Object Inspector и выберите Lay out → Lay out vertically. Также вы можете кликнуть правой кнопкой по пустой области в форме и выбрать те же опции:
Ваши элементы должны быть в том же порядке, что и до внесённых изменений, но если это не так, то просто перетащите их на нужное место.
Так как мы использовали вертикальное размещение, все элементы, которые мы добавим, будут располагаться вертикально. Можно комбинировать размещения для получения желаемого результата. Например, горизонтальное размещение двух кнопок в вертикальном будет выглядеть так:
Если у вас не получается переместить элемент в главном окне, вы можете сделать это в окне Object Inspector.
Последние штрихи
Теперь, благодаря вертикальному размещению, наши элементы выровнены правильно. Единственное, что осталось сделать (но не обязательно), — изменить имя элементов и их текст.
В простом приложении вроде этого с одним лишь списком и кнопкой изменение имён не обязательно, так как им в любом случае просто пользоваться. Тем не менее правильное именование элементов — то, к чему стоит привыкать с самого начала.
Свойства элементов можно изменить в разделе Property Editor.
Подсказка: вы можете менять размер, передвигать или добавлять часто используемые элементы в интерфейс Qt Designer для ускорения рабочего процесса. Вы можете добавлять скрытые/закрытые части интерфейса через пункт меню View.
Измените значение objectName на btnBrowse и text на Выберите папку.
Должно получиться так:
Сохраните дизайн как design.ui в папке проекта.
Превращаем дизайн в код
Пишем код
Теперь у нас есть файл design.py с нужной частью дизайна нашего приложения и мы начинать работу над созданием его логики.
Используем дизайн
Для Python GUI приложения понадобятся следующие модули:
Также нам нужен код дизайна, который мы создали ранее, поэтому его мы тоже импортируем:
В этом классе мы будем взаимодействовать с элементами интерфейса, добавлять соединения и всё остальное, что нам потребуется. Но для начала нам нужно инициализировать класс при запуске кода. С этим мы разберёмся в функции main() :
И чтобы выполнить эту функцию, мы воспользуемся привычной конструкцией:
В итоге main.py выглядит таким образом:
Но нажатие на кнопку ничего не даёт, поэтому нам придётся с этим разобраться.
Добавляем функциональность в наше Python GUI приложение
Начнём с кнопки Выберите папку. Привязать к функции событие вроде нажатия на кнопку можно следующим образом:
Для открытия диалога выбора папки мы можем использовать встроенный метод QtWidgets.QFileDialog.getExistingDirectory :
Для отображения содержимого директории нам нужно импортировать os :
И получить список содержимого следующим образом:
В итоге функция browse_folder должна выглядеть так:
Теперь, если запустить приложение, нажать на кнопку и выбрать директорию, мы увидим:
Так выглядит весь код нашего Python GUI приложения:
Это были основы использования Qt Designer и PyQt для разработки Python GUI приложения. Теперь вы можете спокойно изменять дизайн приложения и использовать команду pyuic5 без страха потерять написанный код.
Собственные виджеты в Qt Designer [Qt, C++]
В статье я расскажу как быстро и легко накидать интерфейс в Qt Designer, а также, как использовать при этом свои собственные виджеты.
Содержание:
Снимок окна программы, которая получилась при написании статьи приведен на рис. 1.
рис. 1 пример окна, созданного в Qt Designer
В нижней части рисунка находится счетчик, значение которого увеличивается с заданной периодичностью. Счетчик можно запустить или остановить при помощи соответствующих кнопок.
Раньше я никогда дизайнером не пользовался, т.к. думал, что он недостаточно гибок (это верно, отчасти), и позволяет использовать лишь стандартные элементы управления. Однако, недавно выполнял несколько заказов, в которых требовалось наклепать бешено много окошек, кнопочек и т.п. (все элементы управления были стандартными), поэтому я решил использовать Qt Designer. Я остался очень доволен дизайнером, но решил попробовать использовать в нем кастомные виджеты (есть несколько способов добиться такого результата, я расскажу лишь про один из них), и написать про это статью :).
1 Виджет счетчика
Наш счетчик отображает какое-либо значение в двоичном виде, при этом единице соответствует кружок красного цвета, а нулю — белого. Счетчик обладает разрядностью и периодичностью, с которой будет увеличиваться хранимое значение.
На листинг 1 приведен исходный код файла заголовка счетчика.
На листинг 1 все достаточно просто, я отмечу лишь один момент. Мы вынужденно написали метод set, для установки параметров счетчика, хотя, очевидно, что такую настройку можно было внести в конструктор. Дело в том, что конструктор классов, которые мы собираемся использовать в Qt Designer должны принимать лишь указатель на QWidget.
Реализация методов класса Counter дана на листинг 2, при этом, стоит отметить, что при создании таймера, в качестве родительского элемента передается 0, а не this (6 строка) — это, также, связано с тем, что наш счетчик будет использоваться Qt Designer-ом (он не должен содержать дочерних элементов). В связи с этим, деструктор счетчика должен освобождать из под таймера память (автоматическая сборка мусора не сработает).
Теперь у нас есть счетчик, который мы встроим в форму, созданную Qt Designer.
2 Qt Designer
Процесс создания формы очень прост — мы создаем чистую форму (при этом, даем ей имя), перетаскиваем на нее 2 кнопки и QWidget, устанавливаем их на нужных нам позициях, устанавливаем размеры и, главное, имена (objectName).
Если мы назовем форму MainUI — то будет автоматически создан файл с именем ui_mainui.h, содержащий класс MainUI. В свою очередь, класс будет содержать поля, имена которых совпадают с заданными в Qt Designer oojectName.
Теперь необходимо сообщить дизайнеру, что вместо виджета в окошке должен отображаться счетчик, для этого надо в настройках виджета выбрать «преобразовать в…», в появившемся окне добавить виджет Counter (как показано на рис.2), при этом, окно будет автоматически связано с файлом counter.h.
рис. 2 окно преобразования виджета
Теперь у нас есть форма, содержащая нужный нам интерфейс, остается только использовать ее…
3 Использование формы, созданной в Qt Designer
Я дал своей форме имя MainUI, виджету — имя m_counter, а кнопка — m_start и m_stop, соответственно. При этом, рядом с файлом проекта появился файл ui_mainui.h, в пространстве имен Ui которого расположен класс MainUI. Есть 2 варианта использовать этот класс:
Файл заголовка формы, используемой в программе приведен на листинг 3, реализация — на листинг 4.
В 6 строке реализации форма, созданная дизайнером устанавливается для текущего диалога (this) при помощи метода setupUI.
Таким образом, практически одной мышью можно создать пользовательский интерфейс и использовать при этом нестандартные виджеты. Однако, при описании класса Counter отмечены особенности создания виджетов, используемых в Qt Designer (такой виджет не может содержать дочерних элементов, а его конструктор принимает единственный аргумент — указатель на родительский диалог).
Qt designer создание меню
На этом шаге рассмотрим создание главного меню.
В библиотеке Qt меню реализуется классом QMenu. Этот класс определен в заголовочном файле QMenu. Основное назначение класса — это размещение команд в меню. Каждая команда представляет объект действия (класс QAction). Все действия или сами команды меню могут быть соединены со слотами для исполнения соответствующего кода при выборе команды пользователем. Например, если пользователь выделил команду меню, то и меню, и объекты действий отправляют сигнал hovered(), и если вам потребуется в этот момент выполнить какие-либо действия, то их нужно соединить с соответствующим слотом.
Пользователю будет легче привыкнуть к работе с новой программой, если ее меню будет похоже на меню других программ. На рис. 1 показаны составляющие типичного меню.
Рис.1. Анатомия меню
Основной отправной точкой меню является меню верхнего уровня. Оно представляет собой постоянно видимый набор команд, которые, в свою очередь, могут быть выбраны при помощи указателя мыши или клавиш клавиатуры (Alt и клавиш управления курсором). Команды меню верхнего уровня предназначены для отображения выпадающих меню. Старайтесь логически группировать команды и объединять их в одном выпадающем меню, которое, в свою очередь, будет вызываться при выборе соответствующей команды меню верхнего уровня. Класс QMenuBar отвечает за меню верхнего уровня и определен в заголовочном файле QMenuBar.
«Горячие» клавиши это по сути определенные комбинации клавиш, с помощью которых выполняется то же самое действие, что и при выборе соответствующей команды меню. Например, для отображения окна About Qt (О Qt), в примере, показанном на рис. 1, используется комбинация клавиш Ctrl+Q. Старайтесь использовать стандартные комбинации для «горячих» клавиш.
По возможности, для всех пунктов меню должны быть определены клавиши быстрого вызова. Это позволит пользователю выбирать команды не только при помощи мыши, но и при помощи клавиатуры, нажав подчеркнутую букву (в названии команды) совместно с клавишей Alt. Например, для выбора команды Exit (Выход) нужно нажать Alt+E (см. рис. 1).
Основные отличия подобного рода комбинаций для быстрого вызова от «горячих» клавиш состоят в следующем:
Стрелка у команды SubMenu (Подменю) (см. рис. 1) говорит о том, что при выборе этой команды появится вложенное подменю, в нашем случае — Test (Тест). Вложенное подменю удобно для того, чтобы разгрузить меню, если оно содержит большое количество команд. Для удобства понимания программы рекомендуется, чтобы степень вложенности не превышала двух.
Разделитель — это черта, которая отделяет одну группу команд от другой.
Команда с флажком используется для управления режимами работы приложения. Установленный флажок сигнализирует об активированной команде меню.
Пиктограмма команды отображает команду меню в графическом виде,который совпадает с кнопкой панели инструментов.
Иногда встречаются команды, которые нельзя исполнить в определенный момент времени. В таких случаях приложение должно делать такие команды недоступными, т. е. сделать их выбор невозможным. Недоступные команды меню отображаются другим, как правило, серым цветом.
Когда команда меню вызывает диалоговое окно, в ее название принято добавлять в конец троеточие. Это правило, правда, не распространяется на вызов простых окон сообщений.
Большинство современных приложений с графическим пользовательским интерфейсом содержат меню, контекстное меню и панели инструментов. Меню позволяют пользователям исследовать возможности приложения и узнать новые способы работы, а контекстные меню и панели инструментов обеспечивают быстрый доступ к часто используемым функциям. На рис. 2 показано меню приложения Электронная таблица.
Рис.2. Меню приложения Электронная таблица
Использование понятия «действия» упрощает программирование меню и панелей инструментов при помощи средств разработки Qt. Элемент action (действие) можно добавлять к любому количеству меню и панелей инструментов.
Создание в Qt меню и панелей инструментов разбивается на следующие этапы:
В приложении Электронная таблица действия создаются в createActions():
Создание действий Open (Открыть), Save (Сохранить) и Save As (Сохранить как) очень похоже на создание действия New (Новый), поэтому вы сможете выполнить их самостоятельно.
Переходим к строке recently opened files (недавно открытые файлы) меню Файл:
Действие Exit (Выход) несколько отличается от действий, которые мы видели до сих пор.
Теперь перейдем к действию Select All (Выделить все):
Давайте теперь перейдем к действию Show Grid (Показать сетку) из меню Options (Настройки):
Действия-переключатели Show Grid (Показать сетку) и Auto-Recalculate (Автопересчет) работают независимо. Кроме того, Qt обеспечивает возможность определения взаимоисключающих действий путем применения своего собственного класса QActionGroup.
Для действия About Qt (О Qt) мы используем слот aboutQt() объекта QApplication, который доступен через глобальную переменную qApp.
Действия нами созданы, и теперь мы можем перейти к построению системы меню с этими действиями.
На следующем шаге рассмотрим создание контекстного меню.
Реализация двойной панели инструментов в QT
Задача и требования
Создание двойного «тулбара» (панели инструментов), положение разделителя которого меняло бы соотношение полей сплиттераа.
Иными словами разделитель должен перетягиваться мышкой.
Положение разделителя тулбаров так же должно зависеть от положения сплиттера.
При наведении курсора на разделитель тулбаров должен меняться тип курсора на горизонтальный QT::SizeHorCursor
При перетягивании разделителя курсор так же должен менять свой тип на горизонтальный
В целом данный тулбар должен соответствовать типичному представлению пользователя о данном типе тулбаров, это сделает интерфейс простым и понятным
Приложение должно давать возможность пользователю менять размер окна
Реализация
Первый шаг
Создаем Qt Widgets application. Основы cpp и h файлов, с которыми мы работаем, сгенерируются без нашего участия.
Object Inspector
Выполнение задачи необходимо начать с построения структуры интерфейса.
Для корректного отображения виджета toolbar необходима хотя бы одна иконка, расположенная на нем. Иконку можете выбрать на свой вкус.
Параметры виджетов
У виджетов MainWindow, centralwidget и у обоих тулбаров задаем параметр Mouse tracking, как true. Это позволит перехватывать события нажатия мыши, отпускания мыши и передвижения мыши над тулбарами.
У обоих списков, что лежат в сплиттере, задаем параметр минимальной ширины. В моем случае этот параметр равен 200 пикселям. У сплиттера задаем параметр childrenCollapsible, как false. Эти действия необходимы для того, чтобы не было возможности «схлопнуть» одну из секций сплиттера или увести тулбар за пределы экрана. Ниже покажу: как это связано с реализацией cpp файла.
У тулбаров нужно установить параметр movable, как false, чтобы убрать дефолтное задание размеров тулбаров пользователем.
MainWindow.h
Под Ui::MainWindow *ui создаем две переменные: timerId и toolbar_dragged.
timerId необходима для хранения времени таймера, которое мы будем использовать.
toolbar_dragged определяет: тянет ли пользователь за разделитель
Задаем слоты и указываем входной параметр слота on_splitter_splitterMoved windowResized, как параметр, по умолчанию заданный, как true. В resizeEvent, событии изменения размера окна, будет вызываться on_splitter_splitterMoved при помощи emit. Позиция сплиттера при изменении окна меняется, потому и должна меняться позиция разделителя тулбаров. Но в случае изменения размера окна перетягивания разделителя не происходит, toolbar_dragged == false. Потому для случая, когда окно меняет размер, необходимо данное входное условие. Подробнее об этом в cpp файле.
MainWindow.cpp
В файл необходимо включить две библиотеки:
QMouseEvent нужна для обработки сообщений мыши
QWidget необходима для работы с виджетами приложения
Рассмотрим конструктор главного окна:
centralWidget()->layout()->setContentsMargins убирает отступы от границ окна, созданные добавлением layout-а, как центрального виджета.
setSpacing(2) нужен потому, что иконки на этом тулбаре не передают событие передвижения мыши в MainWindow, Отступ в 2 пикселя вполне достаточен, чтобы избавиться от этой проблемы.
Функция on_splitter_splitterMoved задает фиксированный размер левого тулбара. Второй тулбар автоматически подстраивается под размер первого. Данный размер можно задавать многократно, что мы и делаем. Обычными resize и move методами это сделать нельзя.
Функция mouseReleaseEvent вызывается, когда пользователь отпускает мышь. После этого нужно приветси курсор к типу Qt::ArrowCursor и задать соответствующую переменную toolbar_dragged, как false.
mousePressEvent перехватывает событие нажатия мыши пользователем.
При срабатывании данной функции, если мышь находится на промежутке +-20 пикселей от разделителя сплиттера, на высоте тулбаров, toolbar_dragged становится true, а тип курсора меняется на соответствующий перетягиванию.
mouseMoveEvent вызывается при перемещении мыши. Если происходит перетягивание разделителя (toolbar_dragged), то вызывает функцию on_splitter_splitterMoved для изменения размера тулбара, предварительно поменяв размеры сплиттера.
timerEvent меняет размеры тулбара через on_splitter_splitterMoved. При изменении размера окна, положение разделителя сплиттера определяется автоматически
Простой GUI калькулятор на Python #1. Создание дизайна приложения
В этой серии статей я научу вас делать простой кроссплатформенный десктопный калькулятор. Здесь не будет тригонометрических функций, процентов, интегралов и других полезных вещей. Вы сможете добавить их по своему желанию.
Мы будем использовать язык Python, фреймворк Qt, библиотеку PySide6, сразу установим её:
pip install PySide6
Qt Designer
Создавать интерфейс мы будем в приложении Qt Designer. Его можно скачать отдельно или найти в папке установленного PySide. Для этого перейдем по пути:
Создаем Main Window, т.е. главное окно приложения.
Сразу убираем ненужные меню и статус бары.
Название приложения можно изменить в свойстве главного окна windowTitle.
Элементы калькулятора
Перетащим нужные элементы в интерфейс. В нашем калькуляторе будет поле ввода Line Edit.
Label с временным выражением над этим полем ввода.
Grid Layout для кнопок.
Просто закинем эти элементы и выберем «Lay Out Vertically» для центрального виджета.
Теперь закинем кнопки в Grid Layout, у меня будет 4 колонки и 5 рядов. Чтобы скопировать и вставить элемент, можно перетащить его с зажатой клавишей Ctrl.
Поставим текст во все кнопки. Для Backspace мы позже поставим иконку.
Проставим горячие клавиши для всех кнопок, кроме Clear и отрицания. За это отвечает свойство shortcut. К сожалению, в Qt Designer нельзя указать несколько горячих клавиш для одной кнопки. Мы сделаем это позже в коде (для точки и равно).
Запишем 0 в Line Edit и выберем правое горизонтальное выравнивание для текста.
Нам нужно сделать так, чтобы пользователь не мог вводить что попало в это поле, чтобы он мог его только читать. Для этого существует свойство readOnly.
Укажем максимальную длину в 16 символов, как в калькуляторе Windows.
Запишем в лейбл какое-нибудь выражение и поставим правое выравнивание.
Чтобы посмотреть превью дизайна используйте сочетание клавиш Ctrl + R.
Давайте назовем элементы, чтобы в коде было проще обращаться к ним.
Размерная политика элементов
Вы спросите: «Почему интерфейс так плохо выглядит?». Все потому, что у элементов не настроена вертикальная политика. Для лейбла и поля поставим Maximum.
Конечно же не забываем сохранить файл интерфейса. Он имеет расширение ui. Обычно я называю файл «design.ui».
Для всех кнопок поставим Expanding.
Стилизация калькулятора
Сначала нужно определиться с цветовой палитрой. Я буду использовать 4 цвета:
Почти черный #121212 для фона.
Белый #FFF для текста кнопок и поля ввода.
Серый #666 для фона кнопок при наведении.
Серый посветлее #888 для текста временного выражения и фона кнопок при нажатии.
В Qt Designer поддерживается язык css. Напишем простенький stylesheet для главного окна. Для всего виджета указываем белый цвет текста и почти черный цвет #121212 для фона.
Я буду использовать бесплатный шрифт Rubik из библиотеки Google Fonts. Он довольно приятный.
Давайте посмотрим, что получается.
Давайте изменим кнопки на плоские с прозрачным фоном.
Теперь напишем изменение фона кнопок при наведении и нажатии. При наведении цвет фона будет меняться на серый #666, при нажатии на серый #888.
Посмотрим на результат.
Стили для Line Edit и Label
Теперь разберемся с Line Edit. Поставим размер шрифта 40pt и уберем границы. Я не буду делать какие-то изменения при наведении и нажатии, потому что пользователь не может взаимодействовать с этим полем.
Для лейбла укажем только цвет #888. С этим элементом пользователь тоже не может взаимодействовать.
Иконки
Теперь зайдем на Google Icons и возьмем черную иконку калькулятора и белую иконку backspace. Я возьму Sharp иконки с размером 24 пикселя. Сохранить нужно в формате PNG.
Далее идет нудный процесс вытаскивания иконок из скачанных архивов. Я думаю, вы справитесь.
Создадим файл ресурсов. Resource Browser > Edit Resources > New Resource File.
Я сохранил файл с названием «files.qrc». Добавим префикс для иконок.
Закинем туда наши две иконки.
Поставим иконку Backspace:
icon > choose Resource
Поставим размер 24 x 24 пикселя в свойстве iconSize.
То же самое проделаем для иконки приложения.
Финальные штрихи
Почти готово. Убираем текст из лейбла. Ставим размер главного окна. У меня будет 300 на 500 пикселей. Такой же размер поставлю минимальным для приложения.
Редактируем интерфейс в коде
Файл интерфейса представляет собой файл с xml разметкой. Мы можем найти блок кода с указывающей рукой, введя в поиске по коду «Pointing».
Заметим, что этот блок кода идет после блока размерной политики. Поэтому нам нужно заменить:
В современных редакторах это сделать очень просто. Например, в VS Code нужно нажать Ctrl + H.
Впишем нужные блоки кода и нажмем Replace All (Ctrl + Alt + Enter).
Проверяем в дизайне.
Дизайн сделан, поздравляю!
Конвертируем файл ресурсов и интерфейса
Для начала нам нужно конвертировать файл ресурсов в питоновский файл. Для этого напишем в терминале:
pyside6-rcc «название файла ресурсов» > «название Python файла на выходе»
pyside6-rcc files.qrc > files_rc.py
Теперь конвертируем в Python файл интерфейса. Для этого введем в терминал тот же самый синтаксис, но теперь используем pyside6-uic:
pyside6-uic design.ui > design.py
Если у вас на выходе получаются файлы с кодировкой UTF-16, конвертируйте их в UTF-8 во избежание дальнейших проблем.
Штош, в следующей статье напишем код для главного функционала калькулятора. До встречи.