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.

Дизайн

Основы

Теперь, когда у нас всё готово к работе, давайте начнём с простого дизайна.

24–26 мая, Онлайн, Бе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 (КП-структура) используется в качестве графического инструментария, а также полезна при создании приложений CLI. Работает на трех основных настольных ПК, на мобильных ОС (Symbian, Nokia Belle, Meego Harmattan, MeeGo) и на встроенных устройствах, способных воспринимать удлинение интервала QT.

История создания программы

Разработка QT была начата в 1990 году норвежскими программистами Эйриком Чамбе-Энг и Хаавардом Нордом. Их компания Trolltech продавала лицензии QT и предоставляла техническую поддержку. Сегодня фирма носит название The QT Company и является дочерней компанией Digia Plc, расположенной в Финляндии. Хотя она является основным драйвером, ПО теперь разрабатывается более крупным альянсом.

Он состоит из многих фирм и отдельных лиц по всему миру и работает используя меритократическую модель управления. Каждый, кто хочет, может присоединиться к команде. Есть много способов внести личный вклад в проект QT. Что такое действие предусматривает? Это, например, написание кода или документации для фреймворка, сообщение об ошибках или оказание помощи другим пользователям на форуме и поддержка страницы в интернете.

Хотя любая система построения может использоваться с программой, она имеет собственный qmake. Это межплатформенный интерфейс для основанных на платформе систем сборки, таких как GNU Make, Visual Studio и Xcode. CMake также является популярной альтернативой для разработки проектов. Не многие знают, что такая QT доступна с разными лицензиями. Речь идет о коммерческом и бесплатном программном обеспечении в нескольких версиях GPL и LGPL.

Интегрированная среда разработки

КП-структура поставляется со своей интегрированной средой разработки (IDE) под названием QT Creator, работает на Linux, OS X и Windows. Она предлагает интеллектуальное завершение кода, подсветку синтаксиса, интегрированную справочную систему, отладчик, а также интеграцию для всех основных систем управления версиями, например, git, Bazaar. В дополнение к разработкам QT Creator в Windows можно также использовать надстройку Visual Studio и другие IDE, например, KDevelop на KDE.

КП-структура отлично поддерживает интернационализацию (i18n) и локализацию (l10n). Инструмент QT Linguist и его компаньоны lupdate, lrelease и lconvert облегчают перевод приложений на требуемые языки. Она поддерживает большинство систем записи, которые используются сегодня. Графический интерфейс создается непосредственно на C ++. Отметим, что QT такое действие выполняет с использованием модуля Widgets. Также она поставляется с интерактивным графическим инструментом QT Designer, который функционирует, как генератор кода для графических интерфейсов на основе Widgets. QT Designer может использоваться автономно.

Разработка графического интерфейса

QTQuick предоставляет требуемые модули для создания графического интерфейса с QML. Можно писать целые приложения только в QML, но, как правило, GUI написан в QML, а backend приложения реализованы на C ++. Кроме того, Creator имеет встроенный графический дизайнер QTQuick и профилировщик.

Приложения, использующие это ПО, обычно записываются в C ++, а привязки QML к другим языкам существуют и могут быть предоставлены третьими лицами. Riverbank Computing, например, это коммерческое и бесплатное программное обеспечение Python bindings (PyQT).

Нужно особенно подчеркнуть, что такое QT имеет множество атрибутов, которые могут быть изменены с помощью геттеров и сеттеров. Если атрибут называется foo, связанный getter и setter будут иметь подписи: T foo () const и void setFoo (const T).

Иерархия классов ПО

В QT виджет также может быть окном. Таким образом, нет необходимости в классе QWindow. Почти все графические элементы наследуются от QWidget:

Это наследование выполняется для облегчения управления свойствами. Некоторые из них, такие как размер и курсоры, могут быть применимы на других графических компонентах, а QAbstractButton предоставляет качества, которые совместно используются всеми кнопками.

Система родительского контроля

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

Сигналы и слоты

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

Гипотетический класс, используемый для проверки прогресса, может давать сигнал, имеющий подпись: void MediaProgressManager :: tick (int miliseconds). Если разработчик подключит сигнал к слоту, который не использует одни и те же параметры, пользователь получит предупреждение: QObject :: connect : Несовместимые аргументы отправителя / получателя.

Это связано с тем, что сигнал передает информацию в слот с использованием определенных параметров.

Поиск проблем компиляции

При компиляции программы, особенно в ситуациях, когда добавляется макрос Q_OBJECT, может возникнуть ошибка: main. cpp: undefined reference to vtable for Window’.

Это связано с тем, что компилятор не запускается в классе метаобъекта. В этом случае перезапускается qmake, выполнив команду Build> Run qmake. Кнопка является стандартным компонентом графического интерфейса КП-структуры. Она часто используется, чтобы сделать уникальный выбор из списка, например, в QT QRadioButton для создания переключателей.

Благодаря своему наследию QRadioButton ведет себя точно так же, как QPushButton. Все свойства у них одинаковы. По умолчанию QRadioButtons не сгруппированы, поэтому многие из них могут быть проверены одновременно. Чтобы иметь «исключительное» поведение многих переключателей, нужно задействовать QButtonGroup. Это делают следующим образом: выделяют новую группу кнопок и присоединяют ее к родительскому объекту. Обратите внимание, что он может быть главным окном.

Установка SDK для Symbian и Nokia

Чтобы начать использовать приложения QT, нужно получить его библиотеку и IDE. Их можно создавать из источника или загружать в виде SDK. Они включают в себя множество функций, таких как кросс-компиляторы для Symbian и Nokia. Обязательно применяют эти пакеты:

Можно выбрать другие пакеты, если требуется разработка для Symbian / Maemo / Meego, а также те, которые имеют более старую версию QT. В Linux лучше использовать пакеты, которые предоставляет дистрибутив. QT Creator должен быть доступен почти во всех дистрибутивах. При распаковке он устанавливает все зависимости, например, библиотеки, компиляторы и заголовки разработки.

Теперь можно создать первое окно, написав обычное «Привет мир».

Прежде чем делать первое графическое приложение, открывают Creator IDE для C ++, который очень хорошо подходит для кодирования приложений QT. Он предоставляет браузер doc и «дизайнер», что упрощает создание окон. Все они вкраплены в хорошо продуманный пользовательский интерфейс.

QT используется для указания того, какие библиотеки и модули имеются в проекте. Поскольку обычно первое приложение представляет собой небольшой графический интерфейс, пользователям понадобятся QTCore и QTGui. Теперь добавляют точку входа приложения. Берут файл или проект C ++. Исходный файл C ++ должен выполнить задание. Следуют за мастером, устанавливая файлу название main. После этого проект готов. В файле проекта появляется новая QT строка, автоматически добавленная Creator.

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

Система сборки Gmake

Creator выполняет задачу вызова системы, но важно знать, как скомпилированы программы QT. Если они небольшие, это легко выполнить вручную, создав файлы объектов, а затем соединив их. Но для больших проектов командная строка является сложной для написания. В Linux все программы скомпилированы с использованием make-файла, который описывает командные строки.

QT использует метаобъекты для расширения функциональных возможностей C ++, qmake отвечает за подготовку файла, который содержит эту фазу извлечения.

QT приложение компилируется в 3 шага:

Установка Creator в Windows

Чтобы установить программу, переходят на официальный сайт Creator и загружают ПО. Выбирают рекомендуемый загрузчик:

Если этого не сделать, компьютер не сможет скомпилировать и запустить программы на C ++.

Для всех последующих экранов выполняют QT Windows:

Советы для чайников

Чтобы пользоваться программой, нужна специальная информация о ее функциях. Самый полный пакет документации находится в сети разработчиков. Он предоставляет DocNotes, которые могут быть добавлены пользователями.

Если QTSDK был установлен правильно, документация, соответствующая текущей версии QT, должна быть также установлена. Также можно использовать QT Assistant, который является автономным браузером doc.

Важные разделы документации:

Документация по классам организована таким образом:

Отзывы

Ежегодно увеличивается количество пользователей QT. Программисты в своих отзывах не просто пишут, что структура достаточно удобная, недорогая, качественная, но и объясняют новичкам все ее достоинства. Вот некоторые из них:

Как видим, с помощью кросс-платформенной структуры можно охватить все целевые платформы с одной технологией и кодовой базой, что минимизирует время выхода на рынок и нагрузку на обслуживание.

Создаём простое приложение

Многие люди борются с тем, чтобы научиться создавать графическое приложение. Самая распространенная причина заключается в том, что они даже не знают, с чего начать. Большинство учебных пособий основаны исключительно на тексте, и трудно научиться разработке графического интерфейса с использованием текста, поскольку графические интерфейсы-это в основном визуальный носитель.

Мы обойдем это, создав простое приложение с графическим интерфейсом, и покажем вам, как легко начать работу. Как только вы поймете основы, легко добавить продвинутые вещи.

Это то, что мы будем строить:

Простое графическое приложение, которое принимает цену, налоговую ставку и вычисляет окончательную цену. Большинство учебников по графическим приложениям пытаются компоновать графические блоки с помощью кода, но это очень болезненно. Мы будем использовать превосходный инструмент QT Designer для верстки нашего приложения:

Так что не нужно бороться, выкладывая дизайн вручную. Все будет сделано графически. Весь исходный код можно найти на сайте github:https://github. com/shantnu/PyQt_first.

Предварительные условия

Если у вас установленаAnaconda, у вас уже будет PyQt4. Если нет, вам нужно будет получить его отсюда: https://riverbankcomputing. com/software/pyqt/download.

Вам также нужен QtDesigner. Я рекомендую вам скачать весь пакет QT, так как там есть и некоторые другие полезные инструменты. Сделать это можно по этой ссылке: https://www. qt. io/download-open-source

Приступаем к работе

Запустите QT Designer. В появившемся окне выберите Главное окно, так как оно даст вам чистый холст:

Следующее, что нужно сделать, это выбрать поле редактирования текста слева:

Видите правую сторону, где у меня неумело красным обведен ящик? Вот где находится имя объекта. Имя-это способ, которым этот объект будет вызван из нашего кода Python, поэтому назовите его чем-то разумным.

Я называю его price_box, так как мы будем вводить цену в это поле. Следующее, что мы сделаем, это прикрепим ярлык к коробке, чтобы дать понять пользователю, для чего эта коробка предназначена.

Выше я обвел этикетку кружком. Перетащите его в главное окно.

Он получает текст по умолчанию textLabel. Дважды щелкните по нему и измените его на Цену. Вы также можете сделать текст большим и жирным, как показано здесь:

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

Круг слева-это вращающаяся коробка. Это ограничивает вводимые значения. Нам не нужен spinbox, просто хорошо посмотреть, как вы можете использовать различные виджеты, которые предоставляет QT Creator. Перетащите окно spin в окно. Первое, что мы делаем, — это меняем имя объекта на что-то разумное, в нашем случае tax_rate. Помните, что именно так этот объект будет вызываться из Python.

Мы можем выбрать значение по умолчанию для нашегоspinbox. Я выбираю 20:

Если вы посмотрите на изображение выше, вы также можете установить минимальные и максимальные ограничения. Мы сохраним их такими, какие они есть. Мы также добавим еще один ярлык под названием Налоговая ставка, как и раньше. Также посмотрите на обведенную кружком кнопку, которую мы будем использовать далее:

Теперь выберите кнопочный блок и перетащите его в наше окно.

На кнопке просто написано «Кнопка», что не очень полезно. Теперь вы должны знать, как это изменить. Но перед этим мы меняем имя кнопки (а не текст) на calc_tax_button.

Далее мы меняем сам текст:

Перетащите в окно еще одно поле редактирования текста. Вам не нужно маркировать его, так как мы напечатаем результат здесь. Измените его имя на results_window (не показано ниже, но вы уже должны знать, как это сделать).

Если вы хотите, вы можете добавить заголовок. Это простая этикеточная коробка с увеличенным шрифтом:

И сохраните свою работу:

Этот файл будет использоваться в следующей части, когда мы напишем код, поэтому сохраните его где-нибудь, где вы сможете получить к нему доступ. Этот файл, который мы создали, является просто XML-файлом. Откройте его в текстовом редакторе, что-то вроде этого:

Написание кода

Код Qt является объектно-ориентированным и таким образом, что его легко проследить. Каждый из виджетов, которые мы добавили, является объектом со своими собственными функциями, такими как toPlainText() (для чтения значения в поле). Это делает его довольно простым в использовании.

Я уверен, что официальная документация где-то упоминает об этом, но вы должны сделать некоторую настройку, прежде чем сможете использовать код. Я нигде не мог найти эту установку, поэтому я вернулся к официальным примерам (а также к другим онлайн-учебникам), чтобы найти самую маленькую программу, необходимую для инициализации класса. Я проверил эту функцию как pyqt_skeleton. py.

Это полезно, так как каждый раз, когда вы запускаете новый проект PyQt, используйте этот скелет для начала и добавляйте свой код.

Код таков:

import sys
from PyQt4 import QtCore, QtGui, uic

qtCreatorFile = «» # Введите файл здесь.

Ui_MainWindow, QtBaseClass = uic. loadUiType(qtCreatorFile)

classMyApp(QtGui. QMainWindow, Ui_MainWindow):
def __init__(self):
QtGui. QMainWindow.__init__(self)
Ui_MainWindow.__init__(self)
self. setupUi(self)

if __name__ == «__main__»:
app = QtGui. QApplication(sys. argv)
window = MyApp()
window. show()
sys. exit(app. exec_())

Главное, что нужно отметить, — это строка 3:

Здесь вы добавляете файл, созданный ранее. Он загружается с помощью встроенной функции:

Ui_MainWindow, QtBaseClass= uic. loadUiType(qtCreatorFile)

Давайте быстро взглянем на код:

if __name__ == «__main__»:
app = QtGui. QApplication(sys. argv)
window = MyApp()
window. show()
sys. exit(app. exec_())

Основной код создает новое графическое приложение Qt. Передача sys. argv необходима, так как QT можно настроить из командной строки. Мы не будем этого делать. Наконец, мы создаем класс MyApp, который наследует от библиотек Qt и инициализирует родительские классы:

classMyApp(QtGui. QMainWindow, Ui_MainWindow):
def __init__(self):
QtGui. QMainWindow.__init__(self)
Ui_MainWindow.__init__(self)
self. setupUi(self)

Вам не нужно знать подробности этого кода. Просто используй скелет и работай над этим. Возьми этот файл, pyqt_skeleton. py, и переименовать его в pyqt_first. py. Это потому, что мы не хотим редактировать исходный файл.

Первое, что нужно сделать, это добавить в код наш XML-файл, тот, который содержит наш графический интерфейс. Замените эту строку:

qtCreatorFile = «» # Введите файл здесь. И qtCreatorFile = «tax_calc. ui»

Это загрузит наш графический файл в память. Теперь ключевым виджетом в нашем графическом интерфейсе была кнопка. Как только вы нажимаете кнопку, что-то происходит. Что? Нам нужно сказать нашему коду, что делать, когда пользователь нажимает кнопку «Рассчитать налог». В функции __init__ добавьте эту строку:

Для чего это? Помните, мы называли нашу кнопку calc_tax_button? (Это было имя объекта, а не текст, который был отображен на нем.) clicked-это внутренняя функция, которая вызывается, когда (сюрприз) кто-то нажимает на кнопку. Все виджеты QT имеют определенные функции, которые вы можете найти в гугле.

Последняя часть кода — connect(self. CalculateTax). Это говорит о том, что подключите эту кнопку к функции под названием self. CalculateTax, так что каждый раз, когда пользователь нажимает эту кнопку, эта функция вызывается.

Мы еще не написали эту функцию. Давай сделаем это сейчас. В классе MyApp добавьте еще одну функцию. Сначала мы рассмотрим всю функцию целиком, а затем перейдем к деталям:

defCalculateTax(self):
price = int(self. price_box. toPlainText())
tax = (self. tax_rate. value())
total_price = цена + ((tax / 100) * price)
total_price_string = «Общая цена с налогом:» + str(total_price)
self. results_window. setText(total_price_string)

Хорошо, давайте посмотрим на код выше, строка за строкой. Мы должны сделать две вещи: прочитать поле цены, прочитать поле налога и рассчитать окончательную цену. Давайте сделаем это сейчас. Помните, что мы будем называть объекты по именам, которые мы им дали (именно поэтому я попросил вас не использовать общие имена по умолчанию, такие как box1, так как это очень скоро привело бы к путанице).

Мы уже знаем, что price_box. toPlainText () — это внутренняя функция, которая считывает значение, хранящееся в этом поле. Кстати, вам не обязательно запоминать все эти функции. Я просто Гуглю что-то вроде “QtTextboxreaddata”, чтобы узнать, как называется функция, хотя через некоторое время вы начнете вспоминать имена, так как они очень логично названы.

Считанное значение представляет собой строку, поэтому мы преобразуем его в целое число и сохраняем в переменной price. Далее у нас taxbox:

Опять же, value () — это функция для чтения из спин-бокса. Спасибо, Гугл. Теперь, когда у нас есть обе эти величины, мы можем рассчитать конечную цену, используя очень высокотехнологичную математику:

total_price = цена + ((tax / 100) *price)
total_price_string = «Общая цена с налогом:» + str(total_price)

Мы создаем строку с нашей окончательной ценой. Это происходит потому, что мы будем выводить эту строку непосредственно в наше приложение:

В нашем results_window мы вызываем функцию setText (), которая выводит созданную нами строку. Просто запустите файл с помощью: