Запуск Designer’a
Как только Вы установили Qt, вы можете запустить Qt Designer так же как и любое другое приложение на Вашей машине. Вы, так же, можете запустить Qt Designer прямо из Qt Creator’a. Qt Creator автоматически открывает все .ui файлы во встроенном Qt Designer’e, в режиме Design.
Обычно встроенный Qt Designer обладает такими же функциями как и отдельный Qt Designer. Для более подробной информации обратитесь к Qt Creator Manual.
Если Ваши формы настолько большие, что не помещаются(прим пер. что имеется ввиду?) в Design режиме, Вы можете открыть их в обычном standalone Qt Designer’e.
Пользовательский интерфейс
При использовании standalone версии Qt Designer’a пользовательский интерфейс может быть настроен для отображения в мульти-оконном [multi-window] режиме (по умолчанию) или режиме “docked window”. При работе в Design режиме Qt Creator’a доступен только мульти-оконный режим. Вы можете сменить режим отображения в Edit -> Preferences.
В мульти-оконном режиме Вы можете расположить инструментальные окна в удобном для Вас порядке. Главное окно содержит меню бар [menu bar], тулбар [tool bar] и виджет-бокс [widget box] содержащий видждеты, которые Вы можете использовать для создания своего юзер-интерфейса.
 |
Главное окно Qt Designer’а Менюбар содержит все стандартные элементы для управления формами, использования буфера обмена и доступа к справке самого приложения(прим. пер. догадался о значении). Текущий режим редактирования [editing mode], инструментальные окна[tool windows] и редактируемые формы, так же, доступны из менюбара. Тулбар отображает самые частые действия используемые при редактировании форм. Которые так же доступны из главного меню. Виджет бокс показывает стандартные виджеты и разметки [layouts] использующиеся для разработки компонентов (прим. пер. Спец термин?). Они сгруппированы в категории отражающие их назначения и функции [features]. |
Большинство функций Qt Designer’a доступны из менюбара, тулбара или виджет бокса. Некоторые функции, так же, доступны из контекстного меню, которое можно вызвать из окон форм [form windows]. На большинстве платформ контекстное меню вызывается правым кликом.
Понятие разметки[layout] в Qt
Разметка используется для расположения и управления элементами, которые составляют пользовательский интерфейс. Qt предлагает набор классов для автоматического управления[handle] разметками QHBoxLayout, QVBoxLayout, QGridLayout, и QFormLayout. Эти классы решают проблему автоматического расположения виджетов, обеспечивая предсказуемое поведение пользовательского интерфейса. К счастью, знание классов разметки не обязательно для расположение виджетов при помощи Qt Designer’a. Вместо этого выберите одну из опций Lay Out Horizontally, Lay Out in a Grid и т.д. из контекстного меню.
Каждый Qt виджет имеет рекомендуемый размер — sizeHint(). Менеджер разметки [layout manager] будет пытаться изменить размер виджета для того чтобы он соответствовал рекомендуемому размеру. В некоторых случаях, не имеет смысла использовать другой размер. К примеру, высота QLineEdit всегда задана в зависимости от размера шрифта и его стиля. В других случаях, требуется изменить размер, например, ширину QLineEdit или ширину и высоту “item view” виджетов. В этом случае вступают в силу ограничения размера minimumSize и maximumSize. Эти свойства Вы можете изменить в редакторе свойств [property editor]. К примеру, для переопределения стандартного sizeHint() просто установите свойствам minimumSize и maximumSize одинаковое значение. Или же, для использования текущего размера как ограничения размера выберите одну из Size Constraint опций в контекстном меню виджета. Разметка [layout] обеспечит соблюдение этих ограничений. Для контроля размера своих виджетов в коде Вы можете просто переопределить sizeHint().
Следующий скриншот показывает схему организации типичного пользовательского интерфейса созданного с помощью сетки [grid]. Координаты на скриншоте показывают позицию каждого виджета на сетке.
Обратите внимание: Внутри сетки объекты QPushButton на самом деле вложены [nested]. Кнопки справа сначала расположены на QVBoxLayout, кнопки внизу сначала расположены на QHBoxLayout. В итоге она расположены по координатам (1,2) и (2,1) на QGridLayout.
Представьте себе разметку [layout] как рамку [box], которая сжимается настолько насколько возможно, пытаясь аккуратно расположить Ваши виджеты и в то же время максимизировать использование доступного пространства.
Разметки [layouts] Qt помогают, когда Вы:
- Изменяете размер интерфейса чтобы поместить его в окна разных размеров.
- Изменяете размер элементов вместе с пользовательским интерфейсом, чтобы использовать различные локализации вашего приложения
- Располагаете элементы чтобы придерживаться стандартов расположения элементов для разных платформ.
Итак, теперь Вам больше не нужно беспокоиться о перерасположении виджетов для разных платформ, настроек и языков.
Следующий пример показывает как различные локализации влияют на пользовательский интерфейс. Когда локализация требует больше места для более длинных строк Qt разметки [layouts] автоматически изменяются для удовлетворения этих требований, в то же время обеспечивая презентабельный вид интерфейса, соответствующего принципам текущей платформы.
| A Dialog in English | A Dialog in French |
 |
 |
Процесс расположения виджетов включает в себя создание такой иерархии разметки, чтобы задавать как можно меньше жестких ограничений размера виджетов.
Для более подробной информации о классах разметки в Qt посетите Layout Management.
Урок #3 – Разработка внутри Qt Designer
За разработку графического дизайна отвечает программа Qt Designer. Она позволяет быстро реализовать графическую составляющую. За урок мы научимся работать с программой и создадим на ее основе программу «Калькулятор».
Видеоурок
Программа Qt Designer
Qt Designer обеспечивает разработчика полноценным графическим редактором. Через него вы можете добавлять виджеты, свойства, а также создавать сигналы (обработчики событий).
Помимо добавления объектов вы можете создавать меню для ваших проектов. Можно управлять статус баром (status bar), меню (menu bar) и toolbar.
Преобразование в «.py»
Qt Designer создает файл с расширением «.ui». Для редактирования такого файла через PyQt 5 его сперва необходимо преобразовать в файл «.py». Этапы преобразования:
- Установите через терминал pyqt и pyqt-tools:
pip install pyqt5 pip install pyqt5-tools- Перейдите в папку, где сохранен файл с расширением «.ui»
- Выполните команду:
pyuic5 -x file_name.ui -o new_file.py- Далее у вас будет Python файл, что можно редактировать через любой текстовый редактор
Python PyQt5 запуск Qt Designer в Windows 7
Если его там нет, попробуйте установить: pip install pyqt5-tools .
Тогда дизайнер искать в: \Lib\site-packages\pyqt5-tools\designer.exe
Если python установлен, но не знаете его путь, можно попробовать узнать у него самого, введя в консоли:
python -c "import sys; print(sys.executable)" Отслеживать
ответ дан 26 апр 2018 в 9:44
76.7k 6 6 золотых знаков 54 54 серебряных знака 120 120 бронзовых знаков
поискал — нет его там
26 апр 2018 в 10:14
возможно, его туда мне положил pyqt4 или pyside, которые раньше устанавливал.
26 апр 2018 в 10:23
в site-packages есть только папка PyQt5, но в ней тоже нет
26 апр 2018 в 11:17
Если его там нет, попробуйте установить: pip install pyqt5-tools. ? Только что установил pyqt5-tools и в site-packages\pyqt5-tools нашел дизайнер
26 апр 2018 в 11:39
Да, получилось. Спасибо большое!
26 апр 2018 в 12:26
Может быть вы смотрели в папке с установленным Python, а не в документах: C:\Users\Username\AppData\Local\Programs\Python. pyqt5_tools\ Qt\ bin
Нашел там, после совета с установкой через команду: pip install pyqt5-tools от пользователя выше.
Отслеживать
1,745 9 9 золотых знаков 19 19 серебряных знаков 28 28 бронзовых знаков
ответ дан 9 окт 2019 в 17:27
41 3 3 бронзовых знака
Я у себя с трудом нашел вот по такому пути:
C:\Users\\AppData\Local\Packages\PythonSoftwareFoundation.Python.3.9_qbz5n2kfra8p0\LocalCache\local-packages\Python39\site-packages\qt5_applications\Qt\bin Отслеживать
ответ дан 30 янв 2021 в 20:13
Khusamov Sukhrob Khusamov Sukhrob
245 1 1 серебряный знак 11 11 бронзовых знаков
Так как с недавних пор можно установить интерпретатор питона версии 3.9 с магазина Windows Store, питон может у кого-то, кто так и сделал, являться приложением магазина со всеми вытекающими. Потому, не смотря на, возможно, до сих пор актуальные предыдущие мне ответы, оставлю свои два варианта. Во втором варианте отличие от предыдущих ответов — папка «qt5_applications».
Установка выполнялась посредством исполнения команд: pip install pyqt5 | pip install pyqt5-tools (была оф. версия 3.7.7) и pip3.9 install pyqt5 | pip3.9 install pyqt5-tools (версия 3.9 скачана приложением из Windows Store, команды исполнялись в PowerShell от имени Администратора)
Актуально для Windows 10, но смею предположить, что и для «Семёрки» также будет актуально за исключением того, что в ней, как мне помнится, нет и не было магазина Windows Store.
Python GUI: создаём простое приложение с PyQt и Qt Designer
Помимо всего прочего, на Python можно создавать десктопные приложения с графическим интерфейсом (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 придётся устанавливать через терминал. Установить всё, что нам понадобится, одной командой можно, например, так:
# для Fedora: $ sudo dnf install python3-qt5 qt-creator # для Debian/Ubuntu: $ sudo apt install python3-qt5 pyqt5-dev-tools qtcreator После того как вы закончили с приготовлениями, откройте командную строку/терминал и убедитесь, что вы можете использовать команду pyuic5 . Вы должны увидеть следующее:
$ pyuic5 Error: one input ui-file must be specified Если вы видите сообщение, что такой команды нет или что-то в таком роде, попробуйте загуглить решение проблемы для вашей операционной системы и версии PyQt.
Если вы используете Windows, то, скорее всего, путь C:\Python36\Scripts (измените 36 на вашу версию Python) не прописан в вашем PATH . Загляните в этот тред на Stack Overflow, чтобы узнать, как решить проблему.
Дизайн
Основы
Теперь, когда у нас всё готово к работе, давайте начнём с простого дизайна.
Откройте 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 , используйте следующую команду:
$ pyuic5 path/to/design.ui -o output/path/to/design.py Пишем код
Теперь у нас есть файл design.py с нужной частью дизайна нашего приложения и мы начинать работу над созданием его логики.
Создайте файл main.py в папке, где находится design.py .
Используем дизайн
Для Python GUI приложения понадобятся следующие модули:
import sys # sys нужен для передачи argv в QApplication from PyQt5 import QtWidgets Также нам нужен код дизайна, который мы создали ранее, поэтому его мы тоже импортируем:
import design # Это наш конвертированный файл дизайна Так как файл с дизайном будет полностью перезаписываться каждый раз при изменении дизайна, мы не будем изменять его. Вместо этого мы создадим новый класс ExampleApp , который объединим с кодом дизайна для использования всех его функций:
class ExampleApp(QtWidgets.QMainWindow, design.Ui_MainWindow): def __init__(self): # Это здесь нужно для доступа к переменным, методам # и т.д. в файле design.py super().__init__() self.setupUi(self) # Это нужно для инициализации нашего дизайна В этом классе мы будем взаимодействовать с элементами интерфейса, добавлять соединения и всё остальное, что нам потребуется. Но для начала нам нужно инициализировать класс при запуске кода. С этим мы разберёмся в функции main() :
def main(): app = QtWidgets.QApplication(sys.argv) # Новый экземпляр QApplication window = ExampleApp() # Создаём объект класса ExampleApp window.show() # Показываем окно app.exec_() # и запускаем приложение И чтобы выполнить эту функцию, мы воспользуемся привычной конструкцией:
if __name__ == '__main__': # Если мы запускаем файл напрямую, а не импортируем main() # то запускаем функцию main() В итоге main.py выглядит таким образом:
import sys # sys нужен для передачи argv в QApplication from PyQt5 import QtWidgets import design # Это наш конвертированный файл дизайна class ExampleApp(QtWidgets.QMainWindow, design.Ui_MainWindow): def __init__(self): # Это здесь нужно для доступа к переменным, методам # и т.д. в файле design.py super().__init__() self.setupUi(self) # Это нужно для инициализации нашего дизайна def main(): app = QtWidgets.QApplication(sys.argv) # Новый экземпляр QApplication window = ExampleApp() # Создаём объект класса ExampleApp window.show() # Показываем окно app.exec_() # и запускаем приложение if __name__ == '__main__': # Если мы запускаем файл напрямую, а не импортируем main() # то запускаем функцию main() Если запустить этот код: $ python3 main.py , то наше приложение запустится!
Но нажатие на кнопку ничего не даёт, поэтому нам придётся с этим разобраться.
Добавляем функциональность в наше Python GUI приложение
Примечание Весь дальнейший код пишется внутри класса ExampleApp .
Начнём с кнопки Выберите папку. Привязать к функции событие вроде нажатия на кнопку можно следующим образом:
self.btnBrowse.clicked.connect(self.browse_folder) Добавьте эту строку в метод __init__ класса ExampleApp , чтобы выполнить привязку при запуске приложения. А теперь взглянем на неё поближе:
- self.btnBrowse : здесь btnBrowse — имя объекта, который мы определили в Qt Designer. self говорит само за себя и означает принадлежность к текущему классу;
- clicked — событие, которое мы хотим привязать. У разных элементов разные события, например, у виджетов списка есть itemSelectionChanged и т.д.;
- connect() — метод, который привязывает событие к вызову переданной функции;
- self.browse_folder — просто функция (метод), которую мы описали в классе ExampleApp .
Для открытия диалога выбора папки мы можем использовать встроенный метод QtWidgets.QFileDialog.getExistingDirectory :
directory = QtWidgets.QFileDialog.getExistingDirectory(self, "Выберите папку") Если пользователь выберет директорию, переменной directory присвоится абсолютный путь к выбранной директории, в противном случае она будет равна None . Чтобы не выполнять код дальше, если пользователь закроет диалог, мы используем команду if directory: .
Для отображения содержимого директории нам нужно импортировать os :
import os И получить список содержимого следующим образом:
os.listdir(path) Для добавления элементов в listWidget мы используем метод addItem() , а для удаления всех элементов у нас есть self.listWidget.clear() .
В итоге функция browse_folder должна выглядеть так:
def browse_folder(self): self.listWidget.clear() # На случай, если в списке уже есть элементы directory = QtWidgets.QFileDialog.getExistingDirectory(self, "Выберите папку") # открыть диалог выбора директории и установить значение переменной # равной пути к выбранной директории if directory: # не продолжать выполнение, если пользователь не выбрал директорию for file_name in os.listdir(directory): # для каждого файла в директории self.listWidget.addItem(file_name) # добавить файл в listWidget Теперь, если запустить приложение, нажать на кнопку и выбрать директорию, мы увидим:
Так выглядит весь код нашего Python GUI приложения:
import sys # sys нужен для передачи argv в QApplication import os # Отсюда нам понадобятся методы для отображения содержимого директорий from PyQt5 import QtWidgets import design # Это наш конвертированный файл дизайна class ExampleApp(QtWidgets.QMainWindow, design.Ui_MainWindow): def __init__(self): # Это здесь нужно для доступа к переменным, методам # и т.д. в файле design.py super().__init__() self.setupUi(self) # Это нужно для инициализации нашего дизайна self.btnBrowse.clicked.connect(self.browse_folder) # Выполнить функцию browse_folder # при нажатии кнопки def browse_folder(self): self.listWidget.clear() # На случай, если в списке уже есть элементы directory = QtWidgets.QFileDialog.getExistingDirectory(self, "Выберите папку") # открыть диалог выбора директории и установить значение переменной # равной пути к выбранной директории if directory: # не продолжать выполнение, если пользователь не выбрал директорию for file_name in os.listdir(directory): # для каждого файла в директории self.listWidget.addItem(file_name) # добавить файл в listWidget def main(): app = QtWidgets.QApplication(sys.argv) # Новый экземпляр QApplication window = ExampleApp() # Создаём объект класса ExampleApp window.show() # Показываем окно app.exec_() # и запускаем приложение if __name__ == '__main__': # Если мы запускаем файл напрямую, а не импортируем main() # то запускаем функцию main() На данный момент этот блок не поддерживается, но мы не забыли о нём! Наша команда уже занята его разработкой, он будет доступен в ближайшее время.
Это были основы использования Qt Designer и PyQt для разработки Python GUI приложения. Теперь вы можете спокойно изменять дизайн приложения и использовать команду pyuic5 без страха потерять написанный код.
Следите за новыми постами по любимым темам
Подпишитесь на интересующие вас теги, чтобы следить за новыми постами и быть в курсе событий.