Как создать приложение на qt designer
Князев Алексей Александрович. Независимый программист и консультант.
Чтобы первый урок был более интересным, построем его на ряде примеров с пояснениями.
Простой пример для ручной сборки
Для лучшего понимания Qt будет правильным выполнить ручную сборку в консоли хотя бы простейшего примера. Методика сборки одинакова для проектов любого размера и важно понимать, как она выполняется.
Рассмотрим простейший пример GUI-приложения, которое выполняет открытие пустого окна на экране. Выделим директорию на диске, где создадим файл main.cpp со следующим содержимым. В пример добавлена нумерация строк для упрощения дальнейших комментариев к примеру. Следует понимать, что нумерация строк не должна содержаться в рабочем файле, так как она не входит в допустимый синтаксис выражений на языке C++.
В строках 01 и 02 выполняется включение заголовочных файлов QApplication и QWidget, в которых, кроме прочего, содержится объявление классов QApplication и QWidget. В нашем примере мы создаем экземпляры этих классов.
Следует заметить удобную традицию именования заголовочных файлов используемую в Qt. Начиная с четвертой версии Qt, если вам потребовался класс с именем Qxxx, то, скорее всего, его определение находится в заголовочном файле Qxxx.
При создании объекта QApplication используется параметризованный конструктор в который передаются аргументы запуска приложения (копируются из аргументов функции main()). Внутри объекта класса выполняется парсинг этих аргументов. Класс приложения поддерживает ряд параметры запуска, которые можно уточнить по справке для соответствующего конструктора QApplication. Параметры запуска не входящие в этот список следует анализировать самостоятельно. В конце этого урока, разместив в главном окне приложения несколько элементов управления мы предложим провести эксперимент с параметром запуска -style, для которого, в любой сборке Qt, возможны значения: motif, windows, platinum.
В строке 08 выполняется изменение одного из атрибутов объекта виджета. С помощью метода setWindowTitle() мы устанавливаем свой текст для заголовка нашего будущего окна. Обратите внимание, что изображение строки обернуто вызовом функции трансляции tr(). Это требование интернационализации приложения. По всем подобным оберткам, специальными средствами Qt, могут быть созданы специальные файлы с переводами на разные языки, которые можно будет использовать в приложении для выполнения автоматических замен. Обычно, такие файлы включают в сборку приложения в виде ресурсов.
В строке 10 выполняется открытие окна приложения. До версии Qt4, перед открытием окна выполнялась явное объявление виджета как главного виджета приложения. Это делалось с помощью следующего кода.
Начиная с версии Qt4 выполнение такой связи выполняется автоматически через обращение к глобальному указателю qApp на экземпляр класса приложения.
Теперь попробуем выполнить сборку приложения. Проще всего это будет сделать в Linux. Для этого надо будет просто открыть консоль и выполнить некоторые команды, которые мы сейчас опишем. Для Windows такая работа может потребовать установку путей на директории размещения утилиты qmake из Qt SDK. Данная утилита реализует правила системы сборки проектов QMake.
Для начала следует узнать, что нам доступно из консоли. Если мы в консоли bash (*nix), то сделать это достаточно просто. Наберите команду qmake и нажмите два раза табуляцию. Мы должны увидеть список всех команд, которые начинаются с сочетания qmake. Например, в моем случае я вижу две команды: qmake и qmake-qt4. Это говорит о том, что у меня из репозитория установлены две версии библиотеки. Команда qmake соответствует версии Qt5 (действует умолчание для последней версии), а команда qmake-qt4 соответствует, соответственно Qt4. Теперь, в зависимости от того, какой командой я воспользуюсь, я буду делать сборку либо с использованием версии Qt5, либо с использованием версии Qt4.
Если все у нас в системе настроено нормально и версии Qt SDK удачные, то сборка проекта должна быть выполнена с помощью следующих трех команд.
С помощью первой команды будет создан проектный файл. Проектный файл имеет суффикс .pro. В контексте Windows правильно будет сказать "расширение pro". Понятия суффикс имени файла и расширение файла означают совершенно разные вещи, хотя и кажутся похожими. Следите за правильностью употребления.
Если этого не произошло, то попробуем найти проблему.
Откройте проектный файл. Попробуйте найти там следующую строку.
Если такой строки там нет, то следует ее добавить, иначе в зависимости от версии SDK проект может быть воспринят как консольный и в него не будут включены пути на заголовочные файлы классов GUI. Это приведт к тому, что при компиляции будут выведены ошибки о том, что включенные заголовочные файлы не найдены.
Следует иметь в виду, что если вы имеете дело с Qt SDK версии 5, то данное определение должно еще включать группу widgets, как показано ниже.
Пример создания шаблона GUI-приложения из QtCreator
На второй странице мастера создания проекта предлагается выбрать имя проекта и директорию его размещения. По указанному имени проекта будет создана поддиректория в которой будут размещены файлы проекта. Создание поддиректории будет выполнено в указанной директории размещения. Таким образом, имя проекта должно определяться правилами которым должно подчиняться имя директории. Однако, чтобы избежать проблем, не используйте русских букв и пробелов. Используйте английские буквы, цифры и символы подчеркивания и тире (знак минуса). Пусть наш проект будет называться app1. Запишем его в строку name, а в строке выбора директории проекта укажем директорию, где и в дальшейшем будем создавать проекты на Qt. Следует избегать путей с русскими буквами и пробелами. Рано или поздно, они могут вызвать проблемы. Если необходимо запомнить этот путь для следующего раза, установите флажок "Use as default project location". Щелкнем по кнопке "Next" для перехода на следующую страницу мастера.
На четвертой странице мастера создания проекта предлагается выбрать имя класса для главной формы проекта, базовый класс, от которого следует унаследовать главную форму проекта и имена файлов, где будет размещен интерфейс и реализация создаваемого класса главной формы. Кроме этого, на странице следует указать будет ли использовано визуальное проектирование формы. Так как мы не будем использовать визуальное проектирование, то следует проследить, чтобы флажок "Generate form" был снят.
Наиболее интересным на четвертой странице мастера создания проекта является выбор базового класса для создания класса формы. Предлагаются три варианта.
Пятая страница мастера создания проекта позволяет определить связь создаваемого проекта с уже открытыми проектами и указать выбор какой-нибудь доступной системы управления версиями проекта. В текущем примере нас не интересуют данные возможности, поэтому нам следует завершить работу мастера щелкнув кнопку "Finish".
В разных версиях QtCreator шаги по созданию проекта могут несколько отличаться, но, по сути, здесь изложены главные моменты, которые следует понимать при создании GUI-проекта. Текущее описание делалось на основе версии QtCreator 2.7.0.
После выполнения мастера создания проекта в QtCreator откроется вид с созданным проектом. Выполните запуск проекта, чтобы проверить настройки среды разработки. Если все в порядке, то созданный шаблон проекта должен откомпилироваться и запуститься. Для обычного запуска проекта можно воспользоваться щелчком по кнопке с изображением зеленого треугольника, размещенной на панели инструментов. Кнопка с изображением зеленого треугольника с жуком выполняет функции запуска в режиме отладке. В этом случае, если в проекте установлены точки останова, то при их достижении, выполнение запущенного приложения остановится и в редакторе отладке подсветится строка на которой был выполнен останов.
Простой пример размещения виджетов в окне приложения
Возьмем проект, который мы создали в предыдущем разделе с помощью мастера среды разработки QtCreator. Созданный проект включает в себя следующие файлы.
Возможно, имена файлов в вашем проекте несколько отличаются. Это может быть либо потому, что вы их явно указали другими, при создании проекта, либо значения по умолчанию для вашей версии QtCreator иные.
В строках 01-03 выполняется включение файлов с интерфесами следующих классов виджетов.
Тело конструктора класса Widget содержит две строки настройки атрибутов окна (строки 10-11) и 8 строк создания и размещения на поле окна трех других виджетов (строки 13-20).
Настройка атрибутов окна состоит из команду установки имени окна приложения и минимального размера окна приложения. Для задания минимального размера использован метод, принимающий значения ширины и высоты окна в пикселях.
Строка 13 содержит создание экземпляра класса QLabel. Объект создается динамически, через оператор new. Для создания объекта используется конструктор, первым параметром которого указывается строка, которую должен изображать создаваемый объект. Вторым параметром данного конструктора следует указать адрес объекта, который станет владельцем создаваемого объекта метки. В качестве адреса владельца указано значение this. По правилам языка C++, this является указателем на объект внутри которого он используется. Т.е., в данном контексте, это указатель на созданный экземпляр класса Widget. Таким образом, в строке 13 создается объект класса метки, который должен изображать указанный текст и владельцем которого назначается текущий объект.
Здесь пришло время рассказать о цепях владения, которые реализованы в системе классов Qt для решения проблемы уничтожения объектов для предотвращения случайных утечек памяти. Следует вспомнить, что объекты созданные динамически, т.е. с помощью оператора new, размещаются в специальной области памяти, называемой кучей (heap) и которые живут в куче до тех пор пока не будут явно уничтожены оператором delete. Если программист не отслеживает уничтожение объектов, которые стали ненужными и не вызывает для их уничтожения оператор delete, то это становится причиной утечки памяти в приложении, которая является серьезной проблемой для ряда языков программирования в группу которых входит язык C++.
Существует несколько известных схем автоматического слежения за уничтожением динамически созданных объектов. Один из них заключается в использовании умных указателей, о которых, следует рассказать позже. Другой способ заключается в создании цепей владения, о котором мы сейчас расскажем. Третьим способом является создание подсистемы уборки мусора, которая должна отлеживать ненужные объекты и уничтожать их. Последний способ, традиционный для ядер многих современных языков, в C++ практически не используется. Гораздо более популярными в традициях языка C++ являются первые два способа.
Именно такая схема владения реализована в системе классов Qt. При создании многих классов из этой библиотеки можно воспользоваться конструктором, который единственным или последним параметром принимает указатель на объект, который назначается владельцем к создаваемому объекту. Параметр этот описывается как параметр со значением по умолчанию, которое определяется как ноль. Таким образом, если адрес владельца не указывается, то параметр получает значение ноль и схема владения для такого объекта отключается. В этом случае следует помнить о явном уничтожении такого объекта.
При реализации схем цепей владения, в некоторых библиотеках используется параметр с именем owner, что с английского языка переводится как владелец. Однако в библиотеке Qt такой параметр называется parent, что переводится с английского как родитель. В результате этого, у некоторых новичков возникает недопонимание образованное тем, что понятие "родитель" традиционо относится к цепям наследования в ООП, однако цепи наследования и цепи владения не имеют ничего общего. Будьте внимательны и не становитесь жертвой заблуждения в этом вопросе.
Вернемся еще раз к строке 13. Там мы создали объект владельцем которого назначен текущий объект главного окна приложения. Переменная plb, которая хранит адрес созданного объекта будет уничтожена автоматически при достижении конца кода конструктора. Однако объект который был распределен в памяти останется жить и далее, и будет жить до тех пор, пока объект главного окна приложения не будет уничтожен. При уничтожении объекта главного окна будут автоматически уничтожены все объекты, которыми объект окна владеет.
В строке 14 мы обращаемся к методу задания атрибутов геометрии, которые определяют размещение настраиваемого объекта относительно своего владельца. Первым и вторым значением указываются горизонтальная и вертикальная координата для верхнего левого угла объекта. Третьим и четвертым значением указывается ширина и высота настраиваемого объекта.
Аналогичным образом, далее, создаются и настраиваются объекты однострочного поля ввода и кнопки.
Если вы добились того, что пример, созданный в предыдущем разделе собрался и запустился без ошибок, то должен выполниться и этот пример, который является расширением предыдущего.
Используя данное приложение можно поэкспериментировать с параметрами запуска приложения. Проще всего это сделать в консоли. Зайдите в директорию сборки приложения и выполните следующие варианты запуска приложения с параметрами. В каждом из запусков должна быть заметна разница в стиле прорисовки виджетов.
Запустите приложение. Потом попробуйте другие значения: windows и platinum. Напомним, что объект класса QApplication поддерживает список из пары десятков параметров запуска, о которых можно прочитать в справке по соответствующим конструкторам класса.
Работая над примером, познакомьтесь со справочной информацией по используемым в примере классам. Попробуйте добавить на форму другие экземпляры классов метки, однострочного поля ввода и кнопки. Кроме этого, попробуйте познакомиться со справкой и добавить на форму объекты следующих классов.
В заключении урока следует заметить, что используемый способ "жесткого" размещения объектов на поле формы, через явное указание геометрии размещения не является традиционным и рекомендуемым в библиотеке классов Qt. В следующих уроках будут рассмотрены менеджеры компоновки, которые являются современными и удобными средствами размещения виджетов на форме.
Штош. Наверное, каждый начинающий программист после "Hello, world!" хочет написать какой-нибудь простенький проект. Почти всегда в голову приходит идея создания калькулятора. Но консольный калькулятор - это как-то скучно и просто. Хочется сделать приложение вот прямо как в системе. Ну или хотя бы что-то похожее.
В этой серии статей я научу вас делать простой кроссплатформенный десктопный калькулятор. Здесь не будет тригонометрических функций, процентов, интегралов и других полезных вещей. Вы сможете добавить их по своему желанию.
Мы будем использовать язык 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 цвета:
Я буду использовать бесплатный шрифт Rubik из библиотеки Google Fonts. Он довольно приятный.
Давайте посмотрим, что получается.
Давайте изменим кнопки на плоские с прозрачным фоном.
Посмотрим на результат.
Стили для Line Edit и Label
Теперь разберемся с Line Edit. Поставим размер шрифта 40pt и уберем границы. Я не буду делать какие-то изменения при наведении и нажатии, потому что пользователь не может взаимодействовать с этим полем.
Иконки
Теперь зайдем на 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 во избежание дальнейших проблем.
Штош, в следующей статье напишем код для главного функционала калькулятора. До встречи.
Как мы отмечали ранее, есть два подхода, которые можно использовать при построении графического пользовательского интерфейса, используя виджеты Qt :
- создать, настроить виджеты и разместить их на форме в соответствующих компоновках с помощью программного кода;
- воспользоваться визуальным редактором форм Qt Designer , который создаст файл формы (он будет описывать ее внешний вид, размещение, размеры, настройки, компонование и т.д.). В дальнейшем из файла формы на этапе компиляции будет создан файл с кодом программы, будет программно создавать этот интерфейс и предоставлять программисту доступ к элементам на форме.
Файлы формы имеют расширение .ui. Qt Designer позволяет редактировать файлы форм, содержащих настройки вида виджетов. Qt Designer можно использовать как отдельную программу или воспользоваться интеграцией с оболочкой Qt Creator — редактором форм.
Визуальный редактор форм позволяет воспользоваться фактически всеми стандартными элементами управления имеющимися в Qt , настроить значение для их свойств, стилизовать их внешний вид и скомпоновать их на форме. Также он содержит большое количество инструментов: поле для редактирования формы, редактор сигнально-слотовых соединений, редактор свойств объектов, средства для работы с компоновками, стилями и т. п.
Для того, чтобы продемонстрировать работу редактора форм, создадим новый пример — простой редактор текста:
- Для того, чтобы создать форму главного окна, мы воспользуемся настройками мастера новых проектов. Вызовите мастер создания файлов и проектов, и выберите тип проекта Qt Widgets Application (Приложение Qt Widgets ). В окне мастера введите имя для нового проекта (например: " SimpleTextEditor "), выберите также инструментарий для проекта. В окне Class Information (Информация о классе) выберите QMainWindow в качестве базового класса главного окна. Также установите флажок Generate Form (Создать форму) — это укажет мастеру на необходимость создания .ui -файла для главного окна (см. рис. 15.1).
увеличить изображение
Рис. 15.1. Окно мастера проектов: создание класса главного окна и формы.
увеличить изображение
Рис. 15.2. Интерфейс редактора форм: 1. Панель виждетов (Widget box) 2. Окно дерева объектов (Object inspector) 3. Редактор свойств (Property editor) 4. Панель переключения режимов работы редактора форм 5. Редактор действий (Action editor) 6. Редактор сигнально-слотовых соединений (Signals & Slots editor) 7. Центральная часть окна, в которой размещена форма.
увеличить изображение
Рис. 15.6. Вид списка действий в редакторе действий (Action Editor) после редактирования меню.
Рис. 15.7. Вид редактора сигналов и слотов (Signals & Slots Editor) после редактирования
В следующем параграфе мы продолжим работу над примером и продемонстрируем, как получить доступ к элементам формы из кода программы.
Чтобы создать графический интерфейс ваших окон в PyQt, вы можете выбрать два основных пути: можно использовать Qt Designer или вручную написать графический интерфейс в простом коде Python. Первый путь может значительно повысить вашу продуктивность, тогда как второй путь дает вам полный контроль над кодом вашего приложения.
Приложения с графическим интерфейсом часто состоят из главного окна и нескольких диалогов. Если вы хотите создавать эти графические компоненты эффективным и удобным способом, Qt Designer - это инструмент для вас. В сегодняшней статье мы, рассмотрим основные способы установки Qt Designer.
Начало работы с Qt Designer
Qt Designer - это инструмент Qt, который предоставляет вам пользовательский интерфейс что видишь, то и получаешь (WYSIWYG) для продуктивного и эффективного создания графических интерфейсов пользователя для ваших приложений PyQt. С помощью этого инструмента вы создаете графический интерфейс, перетаскивая объекты QWidget в пустую форму. После этого вы можете упорядочить их в единый графический интерфейс, используя разные менеджеры компоновки.
Qt Designer также позволяет вам предварительно просматривать ваши графические интерфейсы с использованием различных стилей и разрешений, подключать сигналы и слоты, создавать меню и панели инструментов и многое другое.
Qt Designer не зависит от платформы и языка программирования. Он не создает код на каком-либо конкретном языке программирования, но создает файлы .ui. Эти файлы представляют собой файлы XML с подробным описанием того, как создавать графические интерфейсы на основе Qt.
Установка и запуск Qt Designer
Если имеется установленный пакет Anaconda, просто откройте его терминал Anaconda Prompt и введите команду designer.
Если же нет, то следует запустить следующие команды из терминала или командной строки:
>>> python3 -m venv ./venv
>>> source venv/bin/activate
(venv) C:/Desktop >>> pip install pyqt5 pyqt5-tools
Здесь вы создаете виртуальную среду Python, активируете ее и устанавливаете pyqt5 и pyqt5-tools88. pyqt5 устанавливает PyQt и копию необходимых библиотек Qt, а pyqt5-tools устанавливает набор инструментов Qt, который включает Qt Designer.
При установке исполняемый файл Qt Designer будет помещен в другой каталог в соответствии с вашей платформой:
При успешной установке на экране должны появиться два следующих окна:
Окно на переднем плане - это диалог новой формы Qt Designer. Окно на заднем плане - это главное окно Qt Designer.
Если Вы не хотите пропустить новые материалы на сайте,
то Вы можете подписаться на обновления: Подписаться на обновления
Если у Вас остались какие-либо вопросы, либо у Вас есть желание высказаться по поводу этой статьи, то Вы можете оставить свой комментарий внизу страницы.
Порекомендуйте эту статью друзьям:
Если Вам понравился сайт, то разместите ссылку на него (у себя на сайте, на форуме, в контакте):
Она выглядит вот так:
Комментарии ( 0 ):
Читайте также: