Как открыть qt designer linux
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.
Дизайн
Основы
Теперь, когда у нас всё готово к работе, давайте начнём с простого дизайна.
20–22 декабря, Онлайн, Бе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 Creator
Что такое Qt Creator
Qt Creator также включает в себя утилиту Qt Designer, что позволяет обработать внешний вид окна приложения, добавляя и перетаскивая элементы (аналогично Windows Forms в Visual Studio). В качестве систем сборки используются qmake, cmake и autotools.
Установка Qt Creator
Итак, пора рассмотреть как установить Qt Creator. Если для Windows разработчики позаботились и сделали оффлайн-установщик, то в Linux 32-bit этой возможности не предусмотрено. Поэтому во время установки вам может потребоваться стабильное интернет-соединение (
20-30 минут). Для начала скачаем установщик:
После окончания загрузки переходим в папку с файлом, нажимаем правой кнопкой мыши и выбираем пункт «Свойства».
Теперь перейдем на вкладку «Права» и поставим галочку «Разрешить запуск этого файла в качестве программы».
Теперь нажимаем «Next».
Здесь необходимо выбрать существующий аккаунт или создать его. Данное действие необходимо для проверки лицензии (коммерческой или некоммерческой).
Нажимаем «Next».
Выбираем директорию, в которой будет находиться Qt. Важно, чтобы в пути не было кириллицы и пробелов!
В этом окне принимаем лицензию. Жмем «Next».
Скачиваем и устанавливаем Qt:
sudo apt install qt5-default
Теперь установка Qt Creator:
sudo apt install qtcreator
И, если нужно, исходники.
sudo apt install qtbase5-examples qtdeclarative5-examples
Настройка Qt Creator
Здесь следует рассмотреть несколько вкладок.
Установка компонентов Qt Creator
Если вдруг так случилось, что Вы забыли установить какой-то компонент, или, наоборот, хотите его удалить, то на помощь придет Qt Maintenance Tool. Это инструмент, позволяющий управлять всеми компонентами Qt Creator.
Выберите необходимый пункт (Удалить/добавить компоненты, обновить компоненты или удалить Qt). После выполните необходимые операции и закройте окно.
Ну что же, час пробил! Установка Qt Creator завершена. Пора сделать свое первое кроссплатформенное приложение на Linux, а затем скомпилировать его на Windows. Пусть это будет. программа, выводящая иконку Qt, кнопку и надпись, на которую по нажатию кнопки будет выводиться случайная фраза. Проект несложный, и, конечно же, кроссплатформенный!
Удаляем панель меню и панель инструментов на форму, нажав правой кнопкой мыши и выбрав соответствующий пункт. Теперь перетаскиваем элементы Graphics View, Push Button и Label таким образом:
Или вы можете скачать полный проект на GitHub. Работа с Qt Creator завершена, нажимаем на значок зеленой стрелки слева, и ждем запуска программы (если стрелка серая, сначала нажмите на значок молотка). Запустилось! Ура!
Выводы
Установка и настройка Qt Creator завершена. Теперь вы сможете создавать свои программы под огромное число платформ, оставляя код нетронутым! Кстати, установив Qt на Windows, вы сможете скомпилировать этот проект и там. Удачи вам!
Создаём окружение для PyQt5 в Linux MInt (Ubuntu)
Давно уже до пятой версии обновился Qt и вместе с ним PyQt, но найти информацию по ним в русскоязычном сегменте — задача не из простых. Под катом подробный туториал для тех, кто только начинает знакомиться со связкой Qt + python3.
Цель: собрать и настроить окружение, пройти путь от установки PyQt5 и создания формы в Qt Designer до запуска переносимого бинарника под Windows (да, всё верно, разрабатываем под Mint, собираем для linux и windows).
Пути установки
/dev/src/
Если у вас уже сложилась собственная иерархия размещения файлов, то придётся скорректировать пути в командах, приведённых ниже.
Настройка окружения
Создаём структуру директорий. Откройте консоль и выполните:
Ставим пакет, который потребуется нам для сборки в будущем:
Ставим pip и virtualenv:
Создаём виртуальное окружение, активируем его и обновляем пакеты:
Ставим Qt5. При выборе пути установки я оставил «по-умолчанию»
/Qt. Если Вы выберите другой, то необходимо менять пути в командах ниже:
Ставим SIP — модуль, необходимый для работы PyQt:
На этом всё. Окружение установлено и готово к работе. Для проверки выполните команду:
Ответ должен выглядеть следующим образом:
Для проверки, что всё действительно установилось в виртуальное окружение, откройте новое окно терминала и повторите команду проверки:
В ответ должна появиться ошибка ImportError. Новое окно терминала после этого можно закрыть.
Создание приложения
Перейдём в директорию с нашими исходниками и создадим директорию проекта:
Далее нам потребуется Qt Designer. Если Вы не меняли пусть установки Qt, то запустить его можно командой:
Вот так выглядит запущенный Qt Designer на моей системе:
В данном руководстве я не буду подробно останавливаться на описании интерфейса дизайнера, мы пройдём простейший путь до минимальной готовой формы. Если Вам необходима более подробная информация — Google It!
В диалоговом окне выбираем «Widget» (последний пункт в списке «templates/forms») и нажимаем кнопку «Создать». Откроется форма редактирования виджета:
Перетащите на форму кнопку из меню слева и сохраните полученную форму с именем test.ui в директорию
/dev/src/pyqt_test/:
Tips&Tricks: Нажав [Crtl + R] Вы можете запустить свою форму и «потрогать» её в режиме реального времени.
Конвертируем файл интерфейса из XML формы в понятную python форму:
Я не хочу редактировать что-либо в файле, созданном конвертером PyQt, поэтому наши слоты мы опишем в отдельном файле. Создайте файл test_slots.py и откройте его в любимом Вами редакторе. Наполнение файла должно выглядеть примерно так:
Затем, создайте ещё один файл с именем main.py, в котором мы опишем основную логику:
На этом наше приложение завершено. Выполнив из консоли
мы должны увидеть форму с кнопкой посередине, нажатие на которую меняет название кнопки на системную дату.
Упаковка в исполняемый файл для Linux
Упаковщик потребует некоторой магии при установке.
Скачиваем пакет, не устанавливая его и распаковываем:
Открываем любимым редактором файл cx_Freeze-4.3.4/setup.py. Я использую SublimeText:
Правим строку №84, чтобы она выглядела, как на картинке:
Tips&Tricks: А вы знали, что если запустить SublimeText из виртуального окружения, то интерпретатором по-умолчанию будет из виртуального окружения?
Сохраняем изменения, закрываем редактор, устанавливаем пакет, возвращаемся в папку с исходниками, запускаем упаковку:
После этого в директории с исходниками появится директория dist, в которой среди множества файлов можно заметить файл без расширения main — это и есть наш бинарник, готовый для запуска и переноски. Откровенно говоря, немного расстраивает размер дистрибьютива: на моей машине это — 70,1 Мб, но не стоит забывать, что туда упакованы: python, PyQt, Qt и некоторые общесистемные библиотеки. Сборочный скрипт cxfreeze достаточно гибко конфигурируется, но подбор оптимальных параметров я оставлю на совести читателя. Скажу только, что счастье кроется в сжатии, оптимизации и ручном ограничении зависимостей.
Упаковка в исполняемый файл для Windows
К сожалению, чуда не будет. Мне не известен способ собрать exe напрямую из-под Linux-системы. Поэтому, придётся потанцевать с wine.
Закрываем открытый в самом начале терминал:
Открываем новый, ставим последнюю версию wine:
После этого скачиваем windows-версии уже знакомых нам пакетов и запускаем установку из-под wine:
А дальше немного магии. Идём по ссылке:
Качаем актуальную версию cx_Freeze для нашего интерпретатора и ставим поверх официальной:
После этого остаётся проверить работоспособность. Переходим в каталог с исходником, открываем терминал wine, выполняем уже знакомую команду сборки:
Оказалось, что у меня в распоряжении нет windows-машины, поэтому смог протестировать результат только под wine. Выходим из терминала wine (команда exit), закрываем терминал. Идём раздавать нашу программу всем желающим.
Урок №1. Введение в Qt и установка Qt Creator
Обновл. 16 Сен 2021 |
На этом уроке мы познакомимся с кроссплатформенным фреймворком Qt и установим IDE для работы с ним.
Введение в Qt
Qt является кроссплатформенным (не зависящим от платформы/ОС) фреймворком для разработки приложений на языке С++. С помощью Qt были разработаны такие известные приложения, как: KDE, Opera, Google Earth и Skype. Впервые Qt был опубликован в мае 1995 года.
Qt5 подразумевает двойное лицензирование, а это означает, что Qt может быть использован в некоммерческих целях для создания приложений с открытым исходным кодом, а также как лицензия для коммерческих клиентов. За счет использования собственного фреймворка и мощного инструментария Qt позволяет быстро и удобно создавать собственные кроссплатформенные приложения. Кроме того, команды разработчиков получают возможность работать на разных платформах, используя при этом общие инструменты для разработки и отладки. Весь инструментарий Qt с открытым исходным кодом вы можете найти на сайте qt.io.
Изначально Qt был разработан норвежской компанией по разработке программного обеспечения Trolltech. В 2008 году компанию приобрела Nokia. Спустя четыре года в августе 2012 программные технологии Qt выкупила финская компания-разработчик Digia. Сейчас Qt развивается компанией QT Company, которая является дочерней компанией Digia, и как проект Qt под открытым исходным кодом с участием отдельных разработчиков и фирм.
Установка Qt Creator в Linux
Шаг №1: Мы будем устанавливать IDE с открытым исходным кодом. Для этого переходим по ссылке и выбираем самую свежую версию (на момент написания данной статьи — это Qt 5.13):
Переходим на вкладку «Права» и ставим галочку возле пункта «Разрешить выполнение файла как программы» :
Закрываем «Свойства» и запускаем программу.
Если учетной записи в Qt Account у вас еще нет, то её можно создать сейчас: для этого перейдите по соответствующей ссылке в установщике, и вы будете перенаправлены на сайт qt.io в соответствующий раздел, или просто используйте кнопку «Next» — вы сможете это сделать на следующем шаге:
Шаг №3: Здесь необходимо ввести логин и пароль от Qt Account или создать Qt Account, если его у вас еще нет. Кнопка «Next» переводит нас на следующий этап:
Добро пожаловать в настройки Qt 5.13.0! Для перехода к следующему шагу нажимаем «Далее >» :
Шаг №4: Выбираем каталог для установки Qt 5.13.0. Обратите внимание, адрес каталога указывается латинскими буквами (без кириллицы) и без пробелов! После того, как выбрали каталог, нажимаем «Далее >» :
Шаг №5: Выбираем компоненты, которые хотим установить. Если на данном этапе у вас нет уверенности в выборе конкретных компонентов, то добавление и удаление можно будет сделать позже, после установки программы:
Шаг №6: Принимаем лицензионное соглашение:
И нажимаем на кнопку «Установить» :
Вот примерно следующее вы должны увидеть при запуске Qt Creator:
Поздравляем! Qt Creator установлен.
Установка Qt Creator через командную строку в Linux
Еще одним альтернативным и простым способом установки Qt Creator в Linux на основе Debian является установка из пакетов. Если при работе с Linux вы используете терминал, то перед скачиванием и установкой Qt Creator программа запросит пароль пользователя root (команда sudo без дополнительных опций). Только после этого начнется скачивание и извлечение файлов. Обычно, пакеты Linux не содержат последней версии Qt и их необходимо обновить. Ниже приведен алгоритм действий, позволяющий за 4 шага установить Qt Creator через терминал в Linux.
Шаг №1: Обновление набора утилит для установки, удаления, обновления, поиска пакетов в Linux.
Шаг №2: Скачивание и установка Qt.
$ sudo apt install qt5-default
Шаг №3: Установка Qt Creator.
$ sudo apt install qtcreator
Шаг №4: Установка тестовых программ.
$ sudo apt install qtbase5-examples qtdeclarative5-examples
Установка Qt Creator в Windows
Сначала нам нужно скачать установочный пакет Qt. Вы можете это сделать, обратившись к оф. сайту qt.io. Либо же воспользоваться альтернативным вариантом и скачать с какого-нибудь «зеркала» (например, c этого, полный список всех «зеркал» находится здесь):
Нажимаем на official_releases/ и переходим к online_installers/ :
Нажимаем на online_installers/ и скачиваем файл qt-unified-windows-x86-online.exe :
Запустив скачанный файл, видим перед собой приветствие «Qt Online Installer». Нажимаем «Next» :
Далее у нас спросят о наличии Qt Account. Можно смело нажимать «Skip» и двигаться дальше:
Теперь нам нужно указать путь установки Qt. Для простоты я выбрал C:\Qt :
После того, как инсталлятор скачает и установит все необходимые компоненты, можно будет перейти к непосредственному написанию кода для нашего приложения.
Создание проекта
Вначале нам необходимо создать проект. Сразу скажу, что наша программа будет консольным приложением. Для этого выберите «Файл» > «Создать файл или проект…» или можно воспользоваться сочетанием клавиш Ctrl+N :
На следующем шаге нужно будет указать имя для нашей будущей программы и папку, где будут располагаться файлы проекта. У меня это My_QtApplication и C:\dev\Qt_Project соответственно:
На следующем шаге без изменений, поэтому просто нажимаем кнопку «Далее» :
Теперь нам нужно выбрать набор компиляторов, который мы будем использовать для сборки нашего проекта. Я настоятельно рекомендую выбрать Desktop Qt 5.13.0 MinGW 32-bit (сняв при этом отметки с остальных, если они у вас есть):
На последнем шаге нажимаем «Завершить» :
Теперь вы можете увидеть автоматически сгенерированный Qt-проект консольного приложения. Давайте рассмотрим его детально: