Как запустить qt designer

Getting Started with Qt Designer

This manual covers the fundamental steps that most users will take when creating graphical user interfaces with Qt Designer. We will introduce the main features of the tool by creating a simple dialog that we can use in an example program.

Launching Designer

The way that you launch Qt Designer depends on your platform:

• On Windows, click the Start button, open the Programs submenu, open the Qt 4 submenu, and click Designer.
• On Unix or Linux, you may find a Qt Designer icon on the desktop background or in the desktop start menu under the Programming or Development submenus. You can launch Qt Designer from this icon. Alternatively, you can enter designer in a terminal window.
• On Mac OS X, double click on Qt Designer in the Finder.

The User Interface

When used as a standalone application, Qt Designer‘s user interface can be configured to provide either a multi-window user interface (the default mode), or it can be used in docked window mode. When used from within an integrated development environment (IDE) only the multi-window user interface is available. To switch modes, open the Preferences dialog (Edit menu).

In multi-window mode, you can arrange each of the tool windows to suit your working style. The main window consists of a menu bar, a tool bar, and a widget box that contains the widgets you can use to create your user interface.

The menu bar provides all the standard actions for managing forms, using the clipboard, and accessing application-specific help. The current editing mode, the tool windows, and the forms in use can also be accessed via the menu bar.

The tool bar displays common actions that are used when editing a form. These are also available via the main menu.

The widget box provides common widgets and layouts that are used to design components. These are grouped into categories that reflect their uses or features.

Since Qt 4.4, you can customize your tool bar by clicking on Tools and selecting Configure Toolbars... to bring up the Customize Toolbars dialog shown below.

Use the Add Button to add a custom tool bar and the Remove Button to remove a custom tool bar.

Most features of Qt Designer are accessible via the menu bar, the tool bar, or the widget box. Some features are also available through context menus that can be opened over the form windows. On most platforms, the right mouse button is used to open context menus.

The widget box provides a selection of standard Qt widgets, layouts, and other objects that can be used to create user interfaces on forms. Each of the categories in the widget box contain widgets with similar uses or related features.

Note: Since Qt 4.4, there are some new widgets included, such as: QPlainTextEdit, QCommandLinkButton, QScrollArea, QMdiArea and QWebView.

You can display all of the available objects in a category by clicking on the handle next to the category label. When in Widget Editing Mode, you can add objects to a form by dragging the appropriate items from the widget box onto the form, and dropping them in the required locations.

Qt Designer provides a scratch pad feature that allows you to collect the most commonly used objects in a separate category. This category will be saved for later use when exiting Qt Designer. The scratch pad category can be filled with any widget currently displayed in a form by simply dragging them from the form and dropping them onto the widget box. These widgets can be used in the same way as any other widgets, but in additon they can contain child widgets. Open a context menu over a widget to change its name or remove it from the scratch pad.

Qt учебник
Начало работы с Qt

Как указано в официальной документации , Qt представляет собой кросс-платформенную платформу разработки приложений для настольных компьютеров, встроенных и мобильных устройств. Поддерживаемые платформы включают Linux, OS X, Windows, VxWorks, QNX, Android, iOS, BlackBerry, Sailfish OS и другие.

В этом разделе представлен обзор того, что такое Qt, и почему разработчик может захотеть его использовать.

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

Версии

Установка и настройка в Windows и Linux

Загрузите Qt для Linux с открытым исходным кодом

Перейдите на страницу https://www.qt.io/download-open-source/ и нажмите «Загрузить сейчас», убедитесь, что вы загружаете программу установки Qt для Linux.

Будет загружен файл с именем qt-unified-linux-x-online.run, затем добавьте разрешение exec

Не забудьте изменить «x» для фактической версии установщика. Затем запустите программу установки

Загрузите Qt для Windows с открытым исходным кодом

Перейдите на страницу https://www.qt.io/download-open-source/ . На следующем скриншоте показана страница загрузки в Windows:

То, что вы должны сделать сейчас, зависит от того, какую IDE вы собираетесь использовать. Если вы собираетесь использовать Qt Creator, который включен в программу установки, просто нажмите «Загрузить сейчас» и запустите исполняемый файл.

Если вы собираетесь использовать Qt в Visual Studio, обычно также должна работать кнопка «Загрузить сейчас». Убедитесь, что загруженный файл называется qt-opensource-windows-x86-msvc2015_64-xxxexe или qt-opensource-windows-x86-msvc2015_32-xxxexe (где xxx — версия Qt, например 5.7.0). Если это не так, нажмите «Просмотреть все заказы» и выберите один из первых четырех вариантов под Windows Host.

Если вы собираетесь использовать Qt в Code :: Blocks, нажмите «Просмотреть все закачки» и выберите Qt xxx для Windows 32-bit (MinGW xxx, 1.2 GB) под Windows Host.

После того как вы загрузите соответствующий файл установщика, запустите исполняемый файл и следуйте приведенным ниже инструкциям. Обратите внимание, что вам нужно быть администратором для установки Qt. Если вы не являетесь администратором, вы можете найти несколько альтернативных решений здесь .

Установите Qt в любую операционную систему

После того, как вы загрузили Qt и открыли программу установки, процедура установки одинакова для всех операционных систем, хотя скриншоты могут выглядеть несколько иначе. Представленные здесь скриншоты взяты из Linux.

Войдите в существующую учетную запись Qt или создайте новую:

Выберите путь для установки Qt-библиотек и инструментов

Выберите версию библиотеки и функции, которые вы хотите

После завершения загрузки и завершения установки перейдите в каталог установки Qt и запустите Qt Creator или запустите его непосредственно из командной строки.

Привет, мир

В этом примере мы просто создаем и показываем кнопку в рамке окна на рабочем столе. На кнопке появится ярлык Hello world!

Это представляет собой простейшую возможную программу Qt.

Прежде всего нам нужен файл проекта:

helloworld.pro

• QT используется для указания того, какие библиотеки (модули Qt) используются в этом проекте. Поскольку наше первое приложение представляет собой небольшой графический интерфейс, нам понадобятся QtCore и QtGui. Поскольку Qt5 выделяет QtWidgets из QtGui, нам нужно добавить строку greaterThan , чтобы скомпилировать ее с Qt5.
• TARGET — это имя приложения или библиотеки.
• TEMPLATE описывает тип сборки. Это может быть приложение (приложение), библиотека (lib) или просто подкаталоги (поддиры).
• SOURCES — это список файлов исходного кода, которые будут использоваться при создании проекта.

Нам также нужен main.cpp, содержащий приложение Qt:

main.cpp

• Объект QApplication. Этот объект управляет ресурсами приложения и необходим для запуска любой программы Qt с графическим интерфейсом. Ему нужны argv и args, потому что Qt принимает несколько аргументов командной строки. При вызове a.exec() запускается цикл событий Qt.
• Объект QPushButton. Кнопка с ярлыком Hello world! , Следующая строка, button.show() , показывает кнопку на экране в своем окне.

Наконец, чтобы запустить приложение, откройте командную строку и введите каталог, в котором у вас есть .cpp-файл программы. Введите следующие команды оболочки для сборки программы.

Базовое приложение с QtCreator и QtDesigner

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

Чтобы создать новое приложение, щелкните Файл-> Новый файл или Проект:

Затем выберите приложение «Projects-> Application-> Qt Widgets»

Затем вы можете выбрать имя и путь вашего проекта:

Затем вы можете выбрать набор, который вы будете использовать. Если у вас нет какого-либо набора, QtCreator создаст комплект с вашей версией Qt и основным компилятором вашего компьютера. Если у вас нет компилятора, вы можете установить его. В Windows: установите Visual Studio. В Linux / Mac: установите g ++ или clang ++.

Затем вы можете выбрать имя вашего основного класса окна, унаследованного класса, имя файла, соответствующего вашему классу основного окна. Если вы изучаете или тестируете Qt, вам действительно не нужно их менять.

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

Затем нажмите кнопку «Готово». Теперь вы должны быть здесь:

Это база вашего приложения. если вы запустите его сейчас, щелкнув Build-> Run или ctrl + R (по умолчанию), вы увидите пустое окно.

Теперь мы добавим текст и кнопку. для этого мы будем использовать Qt Designer. Дважды щелкните по mainwindow.ui Итак, теперь вы должны увидеть: (если нет, и вы видите какой-то xml-файл, нажмите кнопку «Дизайн» слева)

Здесь Qt Designer! Кажется довольно сложным. Но как только вы привыкнете к этому, это действительно здорово. Мы добавим текст и кнопку. Слева находится список предметов. Вы можете щелкнуть по одному и перетащить объекты. Нажмите на кнопку и отпустите ее в окне. Затем выполните поиск в Label и сделайте то же самое (у вас есть фильтр в верхнем левом углу, где вы можете написать объект, который вы ищете).

Теперь у вас должно быть что-то вроде этого:

Двойным щелчком объекта вы можете изменить текст на них. Или вы можете увидеть в правой нижней части свойства объекта, который вы сейчас находитесь, и найти свойство текста. Здесь вы также можете изменить имя.

Теперь, если вы сохраните и запустите (лучше нажмите кнопку редактирования, затем сохраните снова, чтобы убедиться, что ваши изменения сохранены), вы получаете:

А? Почему мой ярлык и кнопка такие, когда я бегу? Это потому, что в нашем центральном объекте нет макета. Кстати, если вы измените размер основного окна, вы увидите, что объект сохраняет свое место. Поэтому, чтобы исправить это, мы добавим макет. Скажем, вертикальный макет. Поэтому перетащите вертикальный макет из списка объектов слева. Теперь вы должны увидеть:

Итак, теперь щелкните правой кнопкой мыши в главном окне, где угодно, кроме метки и кнопки. c \ Щелкните по Lay out-> Lay Out Vertically. Теперь вы должны увидеть, что ваши объекты вертикально выровнены в вашем окне. Итак, теперь Move (с перетаскиванием снова), ваш ярлык и кнопка в макете. теперь вы должны получить:

В вашем дизайнере. И если вы запустите приложение:

Здесь вы можете увидеть свое приложение с меткой и кнопкой. И если вы измените размер своего окна, метка и кнопка тоже изменятся.

Но наша кнопка все еще ничего не делает. Мы можем изменить его двумя разными способами. Первый заключается в том, чтобы соединить кнопку с методом, который мы создали. Мы можем сделать это с именем метода connect. Итак, давайте вернемся к нашему коде и перейдем к mainwindow.cpp теперь добавим:

В конструкторе вашего MainWindow ПОСЛЕ ui->setupUI(this); которые инициализируют ui.

Затем мы можем создать MainWindow :: whenButtonIsClicked () в нашем классе .cpp, который может изменить текст метки следующим образом:

И в нашем mainwindow.h нам нужно добавить:

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

Итак, теперь, если мы запустим наше приложение и нажмем на кнопку, получим:

Это означает, что наше соединение работает. Но с Qt Designer у нас есть еще более простой способ сделать это. Если вы хотите сделать другой способ, удалите соединение, чтобы отсоединить кнопку (потому что мы будем подключать ее по-другому), вернитесь к mainwindow.ui и щелкните правой кнопкой мыши по кнопке. Нажмите «Перейти в слот . », выберите «Щелкнуть» () и нажмите «ОК».

Затем вам следует перейти к этой функции:

Это функция, которая будет вызываться, когда вы нажимаете на кнопку. Таким образом, вы можете добавить

Внутрь. Перейдите в mainwindow.h, чтобы сохранить изменения (когда вы делаете переход в слот, он создает метод, связанный с запросом сигнала. Он определяет функцию в .h, но не сохраняет ее. в файл и сохранить его).

И теперь, когда вы запускаете приложение и нажимаете кнопку, вы можете увидеть новое сообщение (если вы все еще видите старое, это значит, что вы не удалили соединение).

Мы также можем добавить int, double и т. Д. В наш ярлык благодаря QVariant который является удивительным классом, который может преобразовать многие вещи во многих других вещах. Поэтому слева добавьте int, который увеличивается, когда мы нажимаем кнопку.

И теперь, мы можем сохранить и запустить снова. Каждый раз, когда вы нажимаете на кнопку, она показывает «это еще проще!» Со значением _smallCounter. Поэтому у вас должно быть что-то вроде:

Это руководство сделано. Если вы хотите узнать больше о Qt, давайте посмотрим другие примеры и документацию Qt в документации StackOverflow или Qt Documentation

Qt Designer

Summary: in this tutorial, you’ll learn how to use the Qt Designer tool to design user interfaces for PyQt applications.

Install the PyQt tools

PyQt6 tools are compatible with Python 3.9 at the time of writing this tutorial. Therefore, you need to install Python 3.9 to continue the tutorial.

Note that if you have Python 3.10 or higher, you can install Python 3.9 in a separate directory and use PyQt6 tools. For example, you can install Python 3.9 in the C:\Python39 directory on Windows.

Create a new virtual environment

First, create a directory to host the PyQt6 projects e.g., D:\pyqt6

Second, create a virtual environment using Python 3.9 using the venv module:

Activate the virtual environment

First, navigate to the pyqt6-env virtual environment directory:

Second, navigate to the Scripts folder:

Third, activate the virtual environment by executing the activate.bat file:

It’ll show the following on Windows:

Install PyQt6 and its tools

First, execute the following command to install pyqt6 package in the pyqt6-env virtual environment:

Second, install the pyqt6-tools package that contains the Qt Designer and other related tools:

The pyqt-tools package will install the Qt Designer in the following location:

Third, execute the pyuic6 command (within the pyqt6-env virtual environment) to check the version:

And you’ll see the following output:

The pyuic6 is a tool for converting a design file ( .ui ) generated by Qt Designer to a Python file ( .py ).

Launch the Qt Designer

From the Shell, type the designer command to launch the Qt Designer:

The Qt Designer will look like this:

Creating a login form

We’ll create a simple login form using the Qt designer and load it into our Python program.

First, select File > New or press Ctrl-N keyboard shortcut to open the New Form dialog:

Second, select the Widget from the templates\forms and click the Create button:

It’ll create a QWidget as follows:

You can set the layout for the widget, and drag and drop widgets from the Widget Box to the form.

Setting widget properties

In the Property Editor, you can set a name for the widget e.g., login_form

and the window title:

Adding widgets to the login form

First, add the widgets QLabel , QLineEdit , and QPushButton to the form:

The following table lists the fields, their types, and names:

Second, set the echo mode of the password field to Password :

Third, right-click the widget and set its layout to Form Layout:

The form will change to the following:

Fourth, change the size of the Login button by setting its Horizontal Size Policy to Fixed:

Fifth, save the form to the D:\pyqt6 directory as login_form.ui file.

Sixth, select Form > Preview. menu or the keyboard shortcut Ctrl-R to preview the form:

Finally, close the Qt Designer.

There’re two ways to use the login_form .ui from a Python program:

1. Convert the .ui file to Python code and use the generated code from the program.
2. Directly use the .ui file in the program.

Converting .ui file to Python code

First, execute the following command to convert the login_form.ui file to login_form.py file:

Note that you need to run the pyuic6 from the pyqt6-env virtual environment.

The pyuic6 generated the login_form.py from the login_form.ui file. The login_form.py contains the following generated Python code:

It’s important to note that you should never manually change the login_form.py file. Because all your manual adjustments will be lost if you edit the login_form.ui in the Qt Designer and regenerate the login_form.py again.

Second, create the login.py file and import the login_ui.py file:

1. Import Ui_login_form class from the login_form.py file
2. Create a new instance of the Ui_login_form and call the setupUi() method to set up the user interfaces.

Third, execute the login.py file:

It’ll show the login window:

Referencing child widgets

To use the child widgets of Ui_login_form widget, you reference their names using the self.ui variable.

For example, you can add a simple authentication when the user enters an email address and password and click the Login button as follows:

First, connect the clicked signal of the button to the authenticate method. Notice that we reference the btn_login button via the self.ui variable:

Second, define the authenticate() method that gets values from the email_line_edit and password_line_edit and perform a simple check of these values against hard-coded values:

Security Notice: Never do this in real applications.

Besides creating an instance of the Ui_login_form inside the login window, you can inherit the Ui_login_form window using multiple inheritances and directly reference the child widgets like this:

Using .ui file directly

Another way to use the design generated by the Qt Designer is to load the .ui file directly using the loadUi() function of the uic module:

The loadUi() function returns an instance of the QWidget and you can reference the child widgets via the self.ui variable.

When you should use Qt Designer

The .ui file generated by the Qt designer creates an abstraction layer between the available widget and the code that consumes it.

Therefore, if you are starting out with PyQt, you should code the UI manually instead of using Qt Designer. By doing this, you know exactly what widgets are available in the application.

However, if you’re familiar with PyQt and work on a large application, you should use Qt Designer to create a good design and improve productivity.

Как запустить QT Designer?

Qt Designer — одна из частей фреймворка Qt. Это графический редактор, который позволит создавать элементы интерфейса вашей программы «с нуля». Окна, списки, чекбоксы, комбобоксы — всё, что вы привыкли видеть в реальных веб-приложениях

Приложение Qt Designer устанавливается вместе с библиотекой PyQt в Python. Для этого в командной строке необходимо запустить установку с помощью системы управления пакетами (pip): pip install pyqt5

После того, как PyQt установилась, у многих начинающих программистов, которые впервые сталкиваются с работой в этой среде, а как найти QtDesigner? Куда это всё установилось?

Самый простой способ быстро найти QtDesigner — это скопировать путь до директории в командной строке при установки PyQt.

Открываем директорию C:\Users\1\AppData\Local\Programs\Python\Python37-32\Lib\site-packages\ и ищем каталог pyqt5_tools

А в нем файл designer.exe

Итоговый путь для QtDesigner — C:\Users\1\AppData\Local\Programs\Python\Python37-32\Lib\site-packages\pyqt5_tools