Как установить designer pyqt5

PyQt5 для начинающих

Привет, Хабр! Сегодня я вас хочу научить делать интерфейс на Python 3&PyQt5.

Установка PyQt5

Для того, чтобы установить PyQt5 в Windows или MacOS, откройте Командную строку или Терминал и введите:

Для Linux, откройте Терминал и введите:

Hello, World!

А сейчас сделаем Hello World приложение. Создайте файл Python, откройте его и введите такой код:

Когда вы запустите, должна получится примерно такая картина:

Как установить designer pyqt5. Смотреть фото Как установить designer pyqt5. Смотреть картинку Как установить designer pyqt5. Картинка про Как установить designer pyqt5. Фото Как установить designer pyqt5Окно Hello, world на Ubuntu

Меняем шрифт надписи

А теперь поменяем шрифт надписи. Теперь код станет таким:

Пример рассчитан на то, что у вас уже установлен шрифт Rubik от Google Fonts. Если нет, его всегда можно скачать отсюда.

Более продвинутая разметка с XHTML

А теперь добавим XHTML. Например, так:

Шпаргалка по XHTML

Код (моноширным шрифтом)

Размер текста 16 пунктов

Текст на ярко-зелёном фоне.

Выравнивание по центру

Больше надписей!

А теперь сделаем 2 надписи:

На вторую я тоже добавил форматирование (подчёркивание), а у первой убрал 123.

Окно без resize()

Все предыдущие примеры использовали такую конструкцию:

Но без этой конструкции можно обойтись, так как виджеты будут сами себе расчищать место.

Подсказки

Ко всем виджетам можно добавить подсказку. Например (привожу только важную для понимания часть кода):

Эпилог

Вот и всё. В следующей части я постараюсь описать кнопки, меню и события.

О песочнице

Это «Песочница» — раздел, в который попадают дебютные посты пользователей, желающих стать полноправными участниками сообщества.

Если у вас есть приглашение, отправьте его автору понравившейся публикации — тогда её смогут прочитать и обсудить все остальные пользователи Хабра.

Чтобы исключить предвзятость при оценке, все публикации анонимны, псевдонимы показываются случайным образом.

О модерации

Не надо пропускать:

Источник

Python GUI: создаём простое приложение с PyQt и Qt Designer

Как установить designer pyqt5. Смотреть фото Как установить designer pyqt5. Смотреть картинку Как установить designer pyqt5. Картинка про Как установить designer pyqt5. Фото Как установить designer pyqt5

Эта статья предназначена для тех, кто только начинает своё знакомство с созданием приложений с графическим интерфейсом (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.

Дизайн

Основы

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

Откройте Qt Designer, где вы увидите диалог новой формы, выберите Main Window и нажмите Create.

Как установить designer pyqt5. Смотреть фото Как установить designer pyqt5. Смотреть картинку Как установить designer pyqt5. Картинка про Как установить designer pyqt5. Фото Как установить designer pyqt5

После этого у вас должна появиться форма — шаблон для окна, размер которого можно менять и куда можно вставлять объекты из окна виджетов и т.д. Ознакомьтесь с интерфейсом, он довольно простой.

Теперь давайте немного изменим размер нашего главного окна, т.к. нам не нужно, чтобы оно было таким большим. А ещё давайте уберём автоматически добавленное меню и строку состояния, поскольку в нашем приложении они не пригодятся.

Все элементы формы и их иерархия по умолчанию отображаются в правой части окна Qt Designer под названием Object Inspector. Вы с лёгкостью можете удалять объекты, кликая по ним правой кнопкой мыши в этом окне. Или же вы можете выбрать их в основной форме и нажать клавишу DEL на клавиатуре.

Как установить designer pyqt5. Смотреть фото Как установить designer pyqt5. Смотреть картинку Как установить designer pyqt5. Картинка про Как установить designer pyqt5. Фото Как установить designer pyqt5

Теперь перетащите куда-нибудь в основную форму List Widget (не List View) и Push Button из Widget Box.

Макеты

Вместо использования фиксированных позиций и размеров элементов в приложении лучше использовать макеты. Фиксированные позиции и размеры у вас будут выглядеть хорошо (пока вы не измените размер окна), но вы никогда не можете быть уверены, что всё будет точно так же на других машинах и/или операционных системах.

Макеты представляют собой контейнеры для виджетов, которые будут удерживать их на определённой позиции относительно других элементов. Поэтому при изменении размера окна размер виджетов тоже будет меняться.

Давайте создадим нашу первую форму без использования макетов. Перетащите список и кнопку в форме и измените их размер, чтобы вышло вот так:

Как установить designer pyqt5. Смотреть фото Как установить designer pyqt5. Смотреть картинку Как установить designer pyqt5. Картинка про Как установить designer pyqt5. Фото Как установить designer pyqt5

Теперь в меню Qt Designer нажмите Form, затем выберите Preview и увидите что-то похожее на скриншот выше. Выглядит хорошо, не так ли? Но вот что случится, когда мы изменим размер окна:

Как установить designer pyqt5. Смотреть фото Как установить designer pyqt5. Смотреть картинку Как установить designer pyqt5. Картинка про Как установить designer pyqt5. Фото Как установить designer pyqt5

Наши объекты остались на тех же местах и сохранили свои размеры, несмотря на то что размер основного окна изменился и кнопку почти не видно. Вот поэтому в большинстве случаев стоит использовать макеты. Конечно, бывают случаи, когда вам, например, нужна фиксированная или минимальная/максимальная ширина объекта. Но вообще при разработке приложения лучше использовать макеты.

Основное окно уже поддерживает макеты, поэтому нам ничего не нужно добавлять в нашу форму. Просто кликните правой кнопкой мыши по Main Window в Object Inspector и выберите Lay outLay out vertically. Также вы можете кликнуть правой кнопкой по пустой области в форме и выбрать те же опции:

Как установить designer pyqt5. Смотреть фото Как установить designer pyqt5. Смотреть картинку Как установить designer pyqt5. Картинка про Как установить designer pyqt5. Фото Как установить designer pyqt5

Ваши элементы должны быть в том же порядке, что и до внесённых изменений, но если это не так, то просто перетащите их на нужное место.

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

Как установить designer pyqt5. Смотреть фото Как установить designer pyqt5. Смотреть картинку Как установить designer pyqt5. Картинка про Как установить designer pyqt5. Фото Как установить designer pyqt5

Если у вас не получается переместить элемент в главном окне, вы можете сделать это в окне Object Inspector.

Последние штрихи

Теперь, благодаря вертикальному размещению, наши элементы выровнены правильно. Единственное, что осталось сделать (но не обязательно), — изменить имя элементов и их текст.

В простом приложении вроде этого с одним лишь списком и кнопкой изменение имён не обязательно, так как им в любом случае просто пользоваться. Тем не менее правильное именование элементов — то, к чему стоит привыкать с самого начала.

Свойства элементов можно изменить в разделе Property Editor.

Подсказка: вы можете менять размер, передвигать или добавлять часто используемые элементы в интерфейс Qt Designer для ускорения рабочего процесса. Вы можете добавлять скрытые/закрытые части интерфейса через пункт меню View.

Измените значение objectName на btnBrowse и text на Выберите папку.

Должно получиться так:

Как установить designer pyqt5. Смотреть фото Как установить designer pyqt5. Смотреть картинку Как установить designer pyqt5. Картинка про Как установить designer pyqt5. Фото Как установить designer pyqt5

Сохраните дизайн как design.ui в папке проекта.

Превращаем дизайн в код

Пишем код

Теперь у нас есть файл design.py с нужной частью дизайна нашего приложения и мы начинать работу над созданием его логики.

Используем дизайн

Для Python GUI приложения понадобятся следующие модули:

Также нам нужен код дизайна, который мы создали ранее, поэтому его мы тоже импортируем:

В этом классе мы будем взаимодействовать с элементами интерфейса, добавлять соединения и всё остальное, что нам потребуется. Но для начала нам нужно инициализировать класс при запуске кода. С этим мы разберёмся в функции main() :

И чтобы выполнить эту функцию, мы воспользуемся привычной конструкцией:

В итоге main.py выглядит таким образом:

Как установить designer pyqt5. Смотреть фото Как установить designer pyqt5. Смотреть картинку Как установить designer pyqt5. Картинка про Как установить designer pyqt5. Фото Как установить designer pyqt5

Но нажатие на кнопку ничего не даёт, поэтому нам придётся с этим разобраться.

Добавляем функциональность в наше Python GUI приложение

Начнём с кнопки Выберите папку. Привязать к функции событие вроде нажатия на кнопку можно следующим образом:

Для открытия диалога выбора папки мы можем использовать встроенный метод QtWidgets.QFileDialog.getExistingDirectory :

Для отображения содержимого директории нам нужно импортировать os :

И получить список содержимого следующим образом:

В итоге функция browse_folder должна выглядеть так:

Теперь, если запустить приложение, нажать на кнопку и выбрать директорию, мы увидим:

Как установить designer pyqt5. Смотреть фото Как установить designer pyqt5. Смотреть картинку Как установить designer pyqt5. Картинка про Как установить designer pyqt5. Фото Как установить designer pyqt5

Так выглядит весь код нашего Python GUI приложения:

Это были основы использования Qt Designer и PyQt для разработки Python GUI приложения. Теперь вы можете спокойно изменять дизайн приложения и использовать команду pyuic5 без страха потерять написанный код.

Источник

Руководство по PyQt5

В этом руководстве по PyQt5 будет показано, как использовать Python 3 и Qt для создания графического интерфейса пользователя в Windows, Mac или Linux. Мы даже расскажем, как самостоятельно написать установщик.

Что такое PyQt5?

PyQt — это библиотека, которая позволяет использовать фреймворк Qt GUI (GUI — это графический интерфейс пользователя) в Python. Сам Qt, как известно, написан на C++. Используя его в Python, вы можете создавать приложения намного быстрее, не жертвуя при этом значительной частью производительности C++.

PyQt5 это самая последняя, пятая версия Qt. Еще можно найти в интернете случайное упоминание PyQt4, но эта версия устарела и больше не поддерживается.

Новый интересный конкурент PyQt — это Qt for Python. Она обладает практически идентичным API, но в отличие от PyQt имеет лицензию LGPL и, следовательно, может использоваться бесплатно даже в коммерческих проектах. Она поддерживается компанией Qt, а значит, скорее всего, за ней будущее. Здесь мы используем PyQt, потому что она более зрелая. Но, так как их интерфейсы очень похожи, вы всегда можете перейти на Qt for Python позднее.

Установка PyQt

Лучший способ управлять зависимостями в Python — через виртуальную среду. Виртуальная среда — это просто локальный каталог, содержащий библиотеки для данного конкретного проекта. В отличии от общесистемной установки библиотек, это не не повлияет на другие ваши проекты.

Для создания виртуальной среды в текущем каталоге выполните следующую команду:

А для Mac и Linux вот эту:

То, что виртуальная среда активирована, вы можете увидеть по префиксу (venv) в командной строке:

Как установить designer pyqt5. Смотреть фото Как установить designer pyqt5. Смотреть картинку Как установить designer pyqt5. Картинка про Как установить designer pyqt5. Фото Как установить designer pyqt5

Теперь, чтобы установить PyQt, выполните следующую команду:

Итак, поздравляем! Вы только что успешно установили PyQt5.

Создание GUI (графического интерфейса пользователя)

Теперь самое время написать ваш первый графический интерфейс! В нашей виртуальной среде запустим Python и выполним следующие команды:

Как установить designer pyqt5. Смотреть фото Как установить designer pyqt5. Смотреть картинку Как установить designer pyqt5. Картинка про Как установить designer pyqt5. Фото Как установить designer pyqt5

Сначала мы загружаем библиотеку PyQt при помощи оператора import :

Затем мы создаем QApplication при помощи следующей команды:

Скобки [] в данной команде представляют аргументы командной строки, переданные приложению. Поскольку наше приложение не использует никаких параметров, мы оставляем скобки пустыми.

Теперь, чтобы реально что-нибудь увидеть, мы создаем следующее сообщение:

Затем мы даем команду вывести это на экран:

Эта команда покажет небольшое окошко (его вид зависит от вашей операционной системы):

Как установить designer pyqt5. Смотреть фото Как установить designer pyqt5. Смотреть картинку Как установить designer pyqt5. Картинка про Как установить designer pyqt5. Фото Как установить designer pyqt5

Последний шаг — передача управления библиотеке Qt и указание «запустить приложение, пока пользователь не закроет его». Это делается так:

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

Виджеты

Все, что вы видите в приложениях PyQt, называется виджетами. Кнопки, сообщения, окна, диалоговые окна, индикаторы выполнения и так далее — все это виджеты. Подобно html элементам, виджеты в Qt зачастую вложены друг в друга. Например, окно может содержать кнопку, а кнопка, в свою очередь, — сообщение.

На следующей картинке показаны наиболее распространенные виджеты Qt:

Как установить designer pyqt5. Смотреть фото Как установить designer pyqt5. Смотреть картинку Как установить designer pyqt5. Картинка про Как установить designer pyqt5. Фото Как установить designer pyqt5

Они перечислены ниже в порядке сверху вниз и слева направо:

Отсюда вы можете загрузить, если хотите, код приложения, которое создает такое окно.

Макеты

Как и в приведенном выше примере, ваш графический интерфейс, скорее всего, будет состоять из нескольких виджетов. В этом случае вам нужно указать Qt, как их расположить. Например, вы можете использовать QVBoxLayout для вертикального расположения виджетов:

Как установить designer pyqt5. Смотреть фото Как установить designer pyqt5. Смотреть картинку Как установить designer pyqt5. Картинка про Как установить designer pyqt5. Фото Как установить designer pyqt5

Вот код, создающий интерфейс, изображенный на картинке выше:

Безусловно, существует большое количество разных макетов, например QHBoxLayout для размещения элементов в ряд. Более подробно с ними можно ознакомиться в документации Qt.

Пользовательские стили

Одной из сильных сторон Qt является поддержка пользовательских стилей. Существует множество механизмов, позволяющих настраивать внешний вид вашего приложения. В этом разделе описаны некоторые из них.

Встроенные стили

Самый грубый способ изменить внешний вид вашего приложения — установить глобальный стиль. Вспомните изображение виджетов, которое мы уже приводили выше:

Как установить designer pyqt5. Смотреть фото Как установить designer pyqt5. Смотреть картинку Как установить designer pyqt5. Картинка про Как установить designer pyqt5. Фото Как установить designer pyqt5

Как установить designer pyqt5. Смотреть фото Как установить designer pyqt5. Смотреть картинку Как установить designer pyqt5. Картинка про Как установить designer pyqt5. Фото Как установить designer pyqt5

Чтобы применить стиль, нужно использовать метод app.setStyle (…) :

Доступные стили зависят от вашей платформы, но обычно они включают в себя «Fusion», «Windows», «WindowsVista» (только для Windows) и «Macintosh» (только для Mac).

Пользовательские цвета

Это изменит цвет текста в кнопках на красный:

Как создать темную тему стиля Fusion, можно посмотреть вот здесь.

Таблицы стилей

В дополнение к вышесказанному вы можете изменить внешний вид своего приложения с помощью таблиц стилей. Это аналог CSS в Qt. Например, мы можем добавить некоторое пространство:

Как установить designer pyqt5. Смотреть фото Как установить designer pyqt5. Смотреть картинку Как установить designer pyqt5. Картинка про Как установить designer pyqt5. Фото Как установить designer pyqt5

Для получения дополнительной информации о таблицах стилей смотрите документацию Qt.

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

Qt использует механизм, называемый сигналами (signals), чтобы вы могли реагировать на такие события, как нажатие кнопки пользователем. Следующий пример иллюстрирует это. Код содержит кнопку, при нажатии на которую отображается окно сообщения.

Термин «слот» важен при использовании Qt в C++, потому что в C++ слоты должны быть объявлены особым образом. Однако в Python любая функция может быть слотом — мы видели это выше. Поэтому различие между слотами и обычными функциями не имеет для нас большого значения.

Сигналы в Qt используются повсеместно. И, конечно, вы также можете определить свои собственные сигналы. Но это выходит за рамки данного руководства.

Компилируем наше приложение

Теперь у вас есть базовые знания для создания GUI, который реагирует на ввод пользователя. Допустим, вы написали приложение. Оно работает на вашем компьютере. Как передать его другим людям, чтобы они тоже могли его запустить?

Вы можете попросить пользователей вашего приложения установить Python и PyQt, как мы сделали выше, а затем предоставить им свой исходный код. Но это очень утомительно (и обычно непрактично). Вместо этого нам нужен отдельный вариант вашего приложения. То есть двоичный исполняемый файл, который другие люди могут запускать в своих системах, не устанавливая ничего.

Затем выполним следующую команду:

Вам будет предложено ввести несколько значений:

Как установить designer pyqt5. Смотреть фото Как установить designer pyqt5. Смотреть картинку Как установить designer pyqt5. Картинка про Как установить designer pyqt5. Фото Как установить designer pyqt5

Как установить designer pyqt5. Смотреть фото Как установить designer pyqt5. Смотреть картинку Как установить designer pyqt5. Картинка про Как установить designer pyqt5. Фото Как установить designer pyqt5

Это приложение PyQt5, такое же, как и те, что мы видели раньше. Его исходный код находится в src/main/python/main.py в вашем текущем каталоге. Но вот что самое интересное: мы можем использовать fbs, чтобы превратить его в отдельный исполняемый файл!

Эта команда создает и помещает автономный двоичный файл в папку /MyApp/ вашего текущего каталога. Вы можете отправить его своим друзьям (с той же ОС, что и ваша), и они также смогут запустить ваше приложение!

Бонус: создаем установщик

Библиотека fbs также позволяет вам создать установщик для вашего приложения с помощью команды fbs installer :

Как установить designer pyqt5. Смотреть фото Как установить designer pyqt5. Смотреть картинку Как установить designer pyqt5. Картинка про Как установить designer pyqt5. Фото Как установить designer pyqt5

(Если вы работаете в Windows, вам сначала нужно установить NSIS и поместить путь к нему в свой PATH.)

За дополнительной информацией по использованию библиотеки fbs обратитесь к ее документации.

Итоги

Если вы дошли до этого места — примите наши поздравления. Надеемся, теперь у вас есть хорошее представление о том, как для написания приложений Python можно использовать PyQt (и различные ее части). Мы также узнали, как можно создавать автономные исполняемые файлы и установщики при помощи fbs.

Источник

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *