Как создать qt приложение
Эта статья предназначена для тех, кто только начинает своё знакомство с созданием приложений с графическим интерфейсом (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
Linux: Всё нужное, вероятно, есть в репозиториях вашего дистрибутива. Qt Designer можно установить из Центра Приложений, но PyQt придётся устанавливать через терминал. Установить всё, что нам понадобится, одной командой можно, например, так:
После того как вы закончили с приготовлениями, откройте командную строку/терминал и убедитесь, что вы можете использовать команду pyuic5 . Вы должны увидеть следующее:
Если вы используете Windows, то, скорее всего, путь C:\Python36\Scripts (измените 36 на вашу версию Python) не прописан в вашем PATH . Загляните в этот тред на Stack Overflow, чтобы узнать, как решить проблему.
Дизайн
Основы
Теперь, когда у нас всё готово к работе, давайте начнём с простого дизайна.
17–19 декабря, Онлайн, Беcплатно
Откройте Qt Designer, где вы увидите диалог новой формы, выберите Main Window и нажмите Create.
После этого у вас должна появиться форма — шаблон для окна, размер которого можно менять и куда можно вставлять объекты из окна виджетов и т.д. Ознакомьтесь с интерфейсом, он довольно простой.
Теперь давайте немного изменим размер нашего главного окна, т.к. нам не нужно, чтобы оно было таким большим. А ещё давайте уберём автоматически добавленное меню и строку состояния, поскольку в нашем приложении они не пригодятся.
Все элементы формы и их иерархия по умолчанию отображаются в правой части окна Qt Designer под названием Object Inspector. Вы с лёгкостью можете удалять объекты, кликая по ним правой кнопкой мыши в этом окне. Или же вы можете выбрать их в основной форме и нажать клавишу DEL на клавиатуре.
В итоге мы имеем почти пустую форму. Единственный оставшийся объект — centralwidget , но он нам понадобится, поэтому с ним мы ничего не будем делать.
Теперь перетащите куда-нибудь в основную форму 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.
Нажмите на кнопку, которую вы добавили в форму. Теперь в Property Editor вы должны видеть все свойства этого элемента. В данный момент нас интересуют objectName и text в разделе QAbstractButton . Вы можете сворачивать разделы в Property Editor нажатием по названию раздела.
Измените значение objectName на btnBrowse и text на Выберите папку.
Должно получиться так:
Именем объекта списка является listWidget , что вполне подходит в данном случае.
Сохраните дизайн как design.ui в папке проекта.
Превращаем дизайн в код
Конечно, можно использовать .ui -файлы напрямую из Python-кода, однако есть и другой путь, который может показаться легче. Можно конвертировать код .ui -файла в Python-файл, который мы потом сможем импортировать и использовать. Для этого мы используем команду pyuic5 из терминала/командной строки.
Чтобы конвертировать .ui -файл в Python-файл с названием design.py , используйте следующую команду:
Пишем код
Теперь у нас есть файл design.py с нужной частью дизайна нашего приложения и мы начинать работу над созданием его логики.
Создайте файл main.py в папке, где находится design.py .
Используем дизайн
Для Python GUI приложения понадобятся следующие модули:
Также нам нужен код дизайна, который мы создали ранее, поэтому его мы тоже импортируем:
Так как файл с дизайном будет полностью перезаписываться каждый раз при изменении дизайна, мы не будем изменять его. Вместо этого мы создадим новый класс ExampleApp , который объединим с кодом дизайна для использования всех его функций:
В этом классе мы будем взаимодействовать с элементами интерфейса, добавлять соединения и всё остальное, что нам потребуется. Но для начала нам нужно инициализировать класс при запуске кода. С этим мы разберёмся в функции main() :
И чтобы выполнить эту функцию, мы воспользуемся привычной конструкцией:
В итоге main.py выглядит таким образом:
Если запустить этот код: $ python3 main.py , то наше приложение запустится!
Но нажатие на кнопку ничего не даёт, поэтому нам придётся с этим разобраться.
Добавляем функциональность в наше Python GUI приложение
Примечание Весь дальнейший код пишется внутри класса ExampleApp .
Начнём с кнопки Выберите папку. Привязать к функции событие вроде нажатия на кнопку можно следующим образом:
Добавьте эту строку в метод __init__ класса ExampleApp , чтобы выполнить привязку при запуске приложения. А теперь взглянем на неё поближе:
- self.btnBrowse : здесь btnBrowse — имя объекта, который мы определили в Qt Designer. self говорит само за себя и означает принадлежность к текущему классу;
- clicked — событие, которое мы хотим привязать. У разных элементов разные события, например, у виджетов списка есть itemSelectionChanged и т.д.;
- connect() — метод, который привязывает событие к вызову переданной функции;
- self.browse_folder — просто функция (метод), которую мы описали в классе ExampleApp .
Для открытия диалога выбора папки мы можем использовать встроенный метод QtWidgets.QFileDialog.getExistingDirectory :
Если пользователь выберет директорию, переменной directory присвоится абсолютный путь к выбранной директории, в противном случае она будет равна None . Чтобы не выполнять код дальше, если пользователь закроет диалог, мы используем команду if directory: .
Для отображения содержимого директории нам нужно импортировать os :
И получить список содержимого следующим образом:
Для добавления элементов в listWidget мы используем метод addItem() , а для удаления всех элементов у нас есть self.listWidget.clear() .
В итоге функция browse_folder должна выглядеть так:
Теперь, если запустить приложение, нажать на кнопку и выбрать директорию, мы увидим:
Так выглядит весь код нашего Python GUI приложения:
Это были основы использования Qt Designer и PyQt для разработки Python GUI приложения. Теперь вы можете спокойно изменять дизайн приложения и использовать команду pyuic5 без страха потерять написанный код.
Рис. 1. Стартовое окно Qt Creator
Рис. 2. Выбор типа проекта
Рис. 3. Окно выбора размещения проекта
Рис. 4. Параметры комплекта
Нажмите ОК и Далее. В следующем окне необходимо определиться с названием класса и выбрать базовый класс (можно всё оставить как есть, по умолчанию).
Рис. 5. Окно выбора базового класса
В следующем окне (Рис. 6) можно добавить контроль версий и увидеть какие файлы будут добавлены в проект:
Рис. 6. Итоговое окно создания проекта
Рис. 7. Окно редактора форм
Элемент графического интерфейса Label предназначен для создание надписей на форме Обратите внимание, что окно будет оформлено в системные цвета. Если вы используете KDE (а эта среда основана на Qt), то будет использована текущая палитра Plasma, которая наследуется виджетами Qt.В левой боковой панели (внизу) нажмите кнопку Собрать проект (или Ctrl+B), а затем Запустить проект (или Ctrl+R). Появится окно вашего первого приложения:
Применение таблицы стилей для элементов
Для изменения внешнего вида элементов можно использовать таблицу стилей. Изменить (или создать) таблицу стилей можно в свойстве styleSheet . Найдите это свойство в инспекторе объектов. Или выполните: над label ЛКМ > Изменить StyleSheet (таблицу стилей). В окне Правка стилей > Добавить шрифт. Выберите какой-нибудь декоративный шрифт установленный в вашей системе. В окне мини-редактора появится правило каскадной таблицы стилей. Добавьте цвет текста:
Или нажмите на кнопку Добавить цвет > background-color и определите цвет фона для окна. Возможный результат на Рис. 10:
Задания для самостоятельной работы
Оцените материал
(3 оценок, среднее: 5,00 из 5)
Загрузка.
Если вы нашли ошибку, пожалуйста, выделите фрагмент текста и нажмите Ctrl+Enter.
Hello Notepad
В первом примере, мы создадим простое окно для редактирования текста. Это самая элементарная программа с графическим интерфейсом Qt.
Исходный код примера:
Рассмотрим подробно каждую строчку кода. В первых двух, мы подключаем заголовочные файлы классов QApplication и QTextEdit, которые необходимы для работы этого примера. Каждому классу в Qt соответствует заголовочный файл с таким же названием.
В строке 6 создается объект класса QApplication, который управляет основными ресурсами, необходимыми для запуска любой программы с графическим интерфейсом Qt. Ему необходимо передать аргументы argv и args функции main() , т.к. Qt использует некоторые параметры командной строки, передаваемые при запуске программы.
В восьмой строке кода создается объект класса QTextEdit. QTextEdit — это визуальный элемент графического интерфейса. В Qt используются определенные виджеты — например, полосы прокрутки, метки и кнопки radio. Виджет может быть контейнером для хранения других виджетов. Наглядным примером является главное диалоговое окно программы.
В строке 9, окно редактирования текста выводится на экран в главном фрейме программы. Поскольку виджеты могут работать как контейнеры (В экземпляре класса QMainWindow находятся полосы панели инструментов, меню, строка состояния и несколько других виджетов), мы может отобразить только один виджет в окне нашей программы. По умолчанию, виджеты не видны. Функция show() используется для их отображения.
В строке 11, создается объект QApplication, который генерирует цикл событий в процессе работы приложения. События генерируются и передаются на обработку виджетам. Примерами событий могут являться клики мыши, нажатия клавиш на клавиатуре и т.п. Когда вы вводите текст в окне редактирования виджета QTextEdit, нажатия клавиш обрабатываются средствами виджета, и вводимый текст отображается в процессе набора.
Для запуска программы, откройте командную строку и зайдите в директорию с .cpp файлом программы. Выполните следующие команды shell-интерпретатора, чтобы скомпилировать пример.
После успешного выполнения предыдущих команд, скомпилированная программа будет размещена в директории текущего проекта (в Windows вы можете использовать nmake вместо make . Исполняемые файлы будут размещены в директориях debug или release, которые создадутся командой make . qmake — это утилита, которая создает файлы конфигурации Qt-проекта, если ей передан аргумент -project . После создания файла конфигурации (.pro), qmake генерирует Makefile, который используется утилитой make для сборки приложения. Позже, мы рассмотрим процесс написания собственных .pro файлов.
Добавления кнопки выхода
В реальных проектах, обычно используется более одного виджета. Сегодня мы добавим кнопку QPushButton под полем редактирования текста. При клике на нее, программа будет завершаться.
Рассмотрим исходный код программы.
Сначала подключается заголовочный файл QtGui. В нем содержатся все классы графического интерфейса Qt.
В строке 10 применяется механизм сигналов и слотов, для того, чтобы закрыть программу после нажатия на кнопку выхода. Слот — это функция, которая может быть вызвана в процессе выполнения программы. Сигнал — функция, вызывающая функции-слоты, которые с ним посредством QObject::connect.
quit() — слот класса QApplication, завершающий работу приложения. clicked() — сигнал, который передает нажатая кнопка QPushButton. Статическая функция QObject::connect связывает определенный слот и сигнал. SIGNAL() и SLOT() — макросы, которые принимают сигнатуры сигналов и слотов, для их связи между собой. Также, функции connect() необходимо передать указатели на объекты, которые будут принимать и рассылать сигналы.
В строке 12 создается объект класса QVBoxLayout. Как уже было сказано, виджеты могут содержать в себе другие виджеты. Можно задавать координаты и размер вложенных виджетов непосредственно, но обычно для этого используют слои (layouts). Слой управляет границами вложенных виджетов. Например, объект QVBoxLayout размещает виджеты в одну вертикальную колонку.
В строках 13 и 14, мы добавляем поле редактирования текста и кнопку выхода к слою layout . В строке 17 задается главный слой для всего приложения.
Наследование QWidget
Когда пользователь хочет закрыть приложение, ему можно показать всплывающее окно, в котором программа спросит подтверждение данного действия. В этом примере мы создадим наследник QWidget и добавим в него слот, который будет привязан к кнопке выхода.
Рассмотрим следующий код.
Макрос Q_OBJECT объявляет наш класс как QObject. Он должен находиться в самом начале определения класса. QObject добавляет несколько расширенных возможностей к обычному классу C++. Например, имена классов и слотов можно запросить в процессе выполнения. Также, мы можем узнать типы параметров слота и вызвать его.
В строке 13 объявляется слот quit() . В последствии, мы присоединим этот слот к сигналу.
В предыдущих примерах, создание графики и присоединение слотов осуществлялось внутри функции main() . Сейчас мы будем использовать конструктор Notepad.
Как видно из определения класса, мы используем указатели на объекты textEdit и quitButton . Для объектов QObject, почти всегда рациональнее выделять память в куче, вместо их копирования.
Мы используем функцию tr() для обработки всех строк, которые видны пользователю. Эта функция применяется, когда приложение нужно перевести на несколько языков. Здесь мы не будем углубляться в детали, но вы можете найти нужную информацию в описании библиотеки Qt Linguist.
Создание файлов .pro
Ранее, мы использовали команду qmake -project для создания файлов .pro. В следующем примере, мы создадим этот файл вручную.
Теперь для сборки программ на Qt, будут использоваться следующие команды.
Использование QMainWindow
Во многих приложениях удобно использовать QMainWindow — слой, в который можно добавлять контекстные меню, встроенные виджеты, панели инструментов и строку состояния. В QMainWindow есть центральная область, куда можно добавлять любые дочерние виджеты. В этом примере мы разместим там поле для редактирования текста.
Рассмотрим определение класса Notepad .
Мы создали два дополнительных слота — open() и save() . Они будут открывать и сохранять документ. Пример их реализации будет представлен позже.
Очень часто, один и тот же слот используется одновременно несколькими виджетами. Например, в пунктах меню и соответственных кнопках на панели инструментов. Чтобы упростить этот процесс, в Qt существует класс QAction, который можно передавать сразу нескольким виджетам и присоединять к слоту. Например, QMenu и QToolBar могут создавать пункты меню, используя одно действие QAction. Скоро вы убедитесь, как это облегчает процессе разработки.
Сначала, мы используем конструктор класса Notepad для создания графического интерфейса программы.
При создании действий, задается текст, отображаемый внутри виджетов, в которые будут добавлены эти действия (в нашем случае, пункты меню). Если нам нужно добавить кнопки для этих действий в панель инструментов, мы можем передать иконку для каждого действия.
Когда пользователь кликает на пункте меню, рассылается сигнал действия и вызывается соответствующий слот.
Сохранение и открытие
В этом примере, мы реализуем функционал слотов open() и save() , которые были добавлены в предыдущем примере.
Первый шаг — это запрос у пользователя имени файла для открытия. В состав Qt входит класс QFileDialog — диалоговое окно, в котором пользователь может выбрать файл. Статическая функция getOpenFileName() открывает модальное окно для выбора файла и возвращает путь к выбранном файлу. Если пользователь отменил действие, функция возвращает пустую строку.
Чтение данных становится тривиальной задачей, благодаря классу QTextStream — оберткой над объектом QFile. Функция readAll() возвращает содержимое файла, как объект QString. Это содержимое мы поместим в поле для редактирования текста. Затем, мы закрываем файл с помощью функции close(), чтобы вернуть файловый дескриптор операционной системе.
Перейдем к реализации слота save() .
Для сохранения данных мы снова используем класс QTextStream. При помощи него, можно записывать строки QString в файл, используя оператор << .
Сначала определимся со средой разработки. Лично я для написания программа использую кросс платформенную IDE Code::Blocks (подробнее про работу в этой IDE с Qt4 можно почитать тут). Так же есть плагины для работы с Qt в Eclipse. Коммерческая версия Qt под MS Windows может быть интегрирована в MSVS. Программы так же можно писать в любом текстовом редакторе, а потом компилировать их из командной строки.
Для наглядности, я покажу как компилировать программы, написанные на Qt, вручную.
Первая программа
Сначала в любом текстовом редакторе создадим файл и назовем его, например, main.cpp
Напишем в нем следующее:
В строках 1 и 2 мы подключили заголовочные файлы Qt в которых находятся основные классы.
В строке 4 мы объявили функцию main — главную функцию, с которой начинается выполнение любой программы. Она возвращает целое число (результат работы программы; 0 — если все в порядке) и принимает на вход две переменные — число параметров командной строки и массив, в котором они сохранены.
В строке 5 мы создаем объект приложения. Этому объекту мы передаем переменные командной строки.
В строке 6 мы создаем диалог — графическое окно прямоугольной формы, с заголовком и кнопками в верхнем правом углу. Создаем метку (строка 7). При создании метки мы передаем ее конструктору указатель на диалог, который становится ее родителем. При удалении родителя автоматически удаляются все его потомки, что очень удобно. Затем устанавливаем надпись метки путем вызова функции setText() (строка 8). Как видно из примера, для отображаемого текста можно использовать html-теги.
В строке 9 мы отображаем наше диалоговое окно с меткой на экране.
И, наконец в строке 10 мы запускаем цикл обработки событий операционной системы приложением. Результат работы объекта мы возвращаем как результат работы программы.
Компиляция
Теперь скомпилируем написанную программу.
Перейдем в каталог, куда мы сохранили наш файл main.cpp и выполним команду
При этом произойдет создание заготовки проекта Qt4, в который автоматически будут включены все файлы исходных кодов, лежащих в данной директории. В результате получится файл с именем как у текущей директории и расширением .pro. Он будет выглядеть следующим образом:
TEMPLATE = app
TARGET =
DEPENDPATH += .
INCLUDEPATH += .
Как видим файл с исходными текстами добавился автоматически. Выполним команду
В результате мы получим Makefile, который используем для того что бы скомпилировать программу, выполнив следующую команду:
Подождем пока процесс компиляции не закончится и запустим нашу первую программу. Она будет выглядеть примерно так:
Вторая программа
Что бы получить полный контроль над создаваемыми окнами и другими виджетами, необходимо создавать производные от них классы. Создадим производный класс MyDialog. В качестве родительского будем использовать класс QDialog. Описание нашего класса поместим в заголовочный файл mydialog.h:
В первых четырех строках мы подключаем необходимые заголовочные файлы используемых графических элементов — диалога, кнопки, надписи и вертикального менеджера компоновки. Использовать такие крупные заголовочные файлы как <QtGui>, <QtCore> и др. в больших проектах не рекомендуется, так как это увеличивает время компиляции.
В шестой строке мы определили наш класс производным от QDialog.
На следующей строчке мы указали макрос Q_OBJECT, который указывает предпроцессору Qt что данный класс будет использовать дополнительные возможности Qt, например, систему сигналов и слотов.
На строке 9 мы указываем конструктор нашего диалогового окна. У него только один входной параметр — указатель на родительский объект (0 если родителя нет).
Конструктор нашего класса мы определим в файле mydialog.cpp:
В строке 4 мы создаем менеджер компоновки, который будет автоматически отображать все добавленные в него виджеты вертикально. Создание надписи аналогично предыдущему примеру.
В строках 7 и 8 создаем кнопку и устанавливаем ее текст. На следующих двух строчках мы добавляем наши виджеты в менеджер компоновки что бы он их автоматически упорядочил.
В строке 11 мы подключаем сигнал нажатия clicked() кнопки button к слоту close() нашего диалогового окна. У каждого объекта Qt могут быть свои сигналы и слоты, которые можно подключать к сигналам и слотам других объектов и таким образом осуществлять коммуникацию между элементами программы.
Файл main.cpp примет следующий вид:
Пересоздаем проект командой
что бы новые файлы автоматически в него добавились и компилируем его. Вот так выглядит наша новая программа:
Третья программа
Если диалоговое окно содержит много графических элементов, то создавать такие окна довольно утомительно. Для упрощения этого процесса есть инструмент под названием Qt Designer. Запускаем его
Читайте также: