Создание графического интерфейса средствами Qt

Аннотация: Изучаются выджеты — визуальные элементы, из которых состоит графический интерфейс пользователя, их компоновка, политика размеров, сигнально-слотовые соединения, элементы графического интерфейса и их использование.

13.1 Виджеты (Widgets)

Виджеты ( Widgets ) — это визуальные элементы, из которых состоит графический интерфейс пользователя.

• Кнопка (класс QPushButton );
• Метка (класс QLabel );
• Поле ввода (класс QLineEdit );
• Числовое поле-счётчик (класс QSpinBox );
• Строка прокрутки (класс QScrollBar ).

В Qt есть около 50-ти готовых классов графических элементов доступных для использования. Родительским классом для всех виджетов является класс QWidget . От него наследуются все главные свойства визуальных элементов, которые мы тщательно рассмотрим. Исследование способов разработки программ с графическим интерфейсом начнём с примера.

Создадим пустой файл проекта. Запустим мастера проектов и выберем в разделе Projects (Проекты) пункт Other Project (Другой проект) . Далее выберем тип проекта Empty Qt Project (Пустой проект Qt) . К файлу проекта добавим содержимое:

TEMPLATE = app #Модули Qt, которые мы будем использовать QT += widgets #Добавляем модуль widgets для работы с виджетами (необходимо для Qt5). TARGET = widget#Название исполняемого файла SOURCES += \ main.cpp

Теперь создадим простую программу с окном, в котором мы будем выводить надпись. Установим размер окна и текст его заголовка, а также установим шрифт для надписи. Для этого создадим файл main.cpp со следующим содержанием:

#include #include int main ( int lArgc, char * lArgv [ ] ) < //Создаём объект QApplication, который инициализирует и настраивает оконную программу, //управляет её выполнением с помощью цикла обработки событий QApplication lApplication ( lArgc, lArgv ); QLabel lLabel; //Создаём виджет QLabel — метка lLabel.setText ( " I am widget! " ); //Задаём текст для метки lLabel.setGeometry ( 200, 200, 300, 150 ); //Задаём размеры — позицию (x, y) ширину и высоту. Задаём выравнивание текста lLabel.setAlignment (Qt::AlignHCenter | Qt::AlignVCenter ); //Класс QFont используют для настройки параметров шрифта. //Выбираем семейство шрифтов Arial Black и размер 12. QFont lBlackFont ( " Arial Black ", 12 ); lLabel.setFont ( lBlackFont ); //Задаём шрифт для метки lLabel.show ( ); //Вызываем метод show() для показа метки на экране. return lApplication.exec ( ); //Запускаем программу на выполнение exec() выполняет //цикл обработки событий. Программа ожидает действия пользователя и выполняет их обработку. >

Как видим, элементы, из которых состоят интерфейсы в Qt , имеют собственные позицию и размер — так называемую «геометрию» — и, таким образом, занимают соответствующую прямоугольный участок на экране (см. рис. 13.1). Также каждый из элементов имеет настройки, которые определяют его поведение и вид.

Рис. 13.1. Первый оконный проект

Для создания структуры виджеты организовывают в иерархию по принципу «часть — целое». Каждый из виджетов может содержать другие виджеты. Такой визуальный элемент становится «родителем» (родительским виджетом) для элементов, которые он содержит. Отметим, что такие отношения не следует путать с наследованием в C++ — отношениями между классами в программе. Отношения между виджетами являются отношениями между объектами. Такие отношения порождают несколько последствий:

• родительский элемент будет отвечать за удаление дочернего элемента: если родительский виджет удалят — то он автоматически удалит и все дочерние элементы;
• родительский виджет размещает дочерние виджеты внутри себя, части дочерних виджетов, которые выходят за пределы родителя будут невидимыми;
• часть состояния родительского виджета передаётся дочерним — это касается некоторых свойств (видимость, активность) и стилей, которые накладываются на визуальный элемент.

Виджеты, которые не имеют родителя (виджеты верхнего уровня), имеют вид отдельных окон в программе. Рассмотрим пример. Назовём новый проект ParentExample . Файл проекта будет содержать обычные для GUI -проекта настройки:

TEMPLATE = app TARGET = ParentExample QT += widgets

Для виджета, который мы будем использовать в качестве главного окна создадим новый класс. Для этого в категории Files and Classes (Файлы и классы) выберем раздел С++ и выберем С++ Class (см. рис. 13.2).

увеличить изображение
Рис. 13.2. Мастер создания нового класса

Следующим шагом будет создание нескольких элементов на окне. Для этого откроем файл parentwidget.cpp и изменим код конструктора класса. Для отображения элементов достаточно создать их в конструкторе класса и задать ParentWidget как отца для них. Код parentwidget.cpp выглядит так:

#include " parentwidget.h " #include #include #include ParentWidget::ParentWidget ( QWidget * parent ) : QWidget ( parent ) < //Создаём метку, указывая родительский виджет — this, то есть экземпляр класса ParentWidget. QLabel * lLabel=new QLabel ( this ); //Позиция относительно левого верхнего угла родительского виджета. lLabel ->setGeometry ( 50, 0, 100, 30 ); lLabel ->setText ( " TextLabel " ); //Текст на метке. //Создаём кнопку, задаём "родителя", геометрию и текст QPushButton * lPushButton = new QPushButton ( this ); lPushButton->setGeometry ( 50, 50, 100, 30 ); lPushButton->setText ( " PushButton " ); //Создаём поле ввода, задаём "родителя", геометрию и текст QLineEdit * lLineEdit = new QLineEdit ( this ); lLineEdit ->setGeometry ( 50, 100, 100, 30 ); lLineEdit ->setText ( " LineEdit " ); lLineEdit ->selectAll ( ); //Выделяем текст в поле ввода (просто для примера) //Наконец изменяем размер родительского виджета setGeometry ( x ( ), y ( ), 300, 150 ); //и задаём текст заголовка окна setWindowTitle ( " parent widgetExample " ); >

Поскольку родительским элементом является ParentWidget , то метка ( QLabel ), кнопка ( QPushButton ) и текстовое поле (QLineEdit) находятся в его пределах. Позицию дочерних виджетов задают относительно левого верхнего угла отца. В этом легко убедиться изменив размеры и позицию окна нашей программы. Обратите внимание на то, как мы создавали элементы пользовательского интерфейса в динамической памяти используя оператор new . Это гарантирует, что элементы не будут удалены после завершения работы конструктора ParentWidget .

Далее добавим в проект файл main.cpp . Наш класс наследует от класса QWidget — базового класса для всех визуальных элементов пользовательского интерфейса, а следовательно будет обладать всеми его особенностями. Создадим экземпляр нашего класса и вызовем метод show() для того, чтобы показать его (см. рис. 13.3).

#include //Подключаем .h файл с определением нашего класса ParentWidget #include " parentwidget.h " int main ( int lArgc, char * lArgv [ ] ) < QApplication lApplication ( lArgc, lArgv ); //Создаём и показываем окно программы ParentWidget lParentWidget; //Переместить окно в точку экрана с координатами 100, 200 lParentWidget.move ( 100, 200 ); lParentWidget.show ( ); return lApplication.exec ( ); >

QWidget — базовый виджет для всех интерфейсных объектов¶

Если виджет не имеет родителя (parent), то виджет отображается как окно, иначе оно распологается на родительском виджете.

Если в параметре flags указан тип окна, то компонент, имея родителя, будет обладать свои собственным окном, но привязан к родительскому окну.

Флаги виджета из класса QtCore.Qt

• Widget — тип по умолчанию для класса QWidget
• Window — указывает, что компонент является окном, независимо от того, имеет он родителя или нет.

Окно выводится с рамкой и заголовком, в котором расположены кнопки Свернуть, Развернуть и Закрыть. По умолчанию размеры окна можно изменять с по­мощью мыши

Окно выводится с рамкой и заголовком, в котором располо­жены кнопки Справка и Закрыть. Размеры окна можно изменять с помощью мыши.

Окно выводится без рамки и заголовка. Кроме того, окно может отбрасывать тень. Изменить размеры окна с по­мощью мыши нельзя

Окно выводится с рамкой и заголовком (меньшем по высоте, чем обычное окно), в котором расположена кнопка Закрыть. Размеры окна можно изменять с помощью мыши

Окно выводится без рамки и заголовка. Изменить размеры окна с помощью мыши нельзя

Окно выводится без рамки и заголовка. Изменить размеры окна с помощью мыши нельзя. Значение по умолчанию для класса

Окно вообще не отображается на экране

Окно выводится с рамкой и заголовком (меньшем по высоте, чем обычное окно) без кнопок. Изменить размеры окна с помощью мыши нельзя.

Для окон верхнего уровня можно дополнительно указать следующие атрибуты из класса QtCore.Qt через оператор |:

• MSWindowsFixedSizeDialogHint — запрещает изменение размеров окна.

Краткое описание

Прежде чем делиться всеми базовыми знаниями, необходимо представить здесь широко используемые windows-QWidget, QDialog, QMainWindow.

Студенты, знакомые с Qt, должны знать, что они будут встречаться при выборе информации о классе для новых проектов Qt Widgets. Да, это совпадение, что они могут встречаться каждый раз. Поэтому в будущем развитии Qt мы будем часто иметь с ними дело. Как говорится, знание себя и знание друг друга означает, что вы не будете поражены. Только поняв их и познакомившись с ними, мы сможем лучше их контролировать. , ,

QWidget наследует от QObject и QPaintDevice, QDialog и QMainWindow наследуют от QWidget, и между QDialog и QMainWindow нет прямой связи. Озорные маленькие друзья из горшочка снова расстроены, они явно принадлежат одному отцу, то есть отношения брат-сестра O (∩_∩) O ха-ха-ха ~.

• Краткое описание
• QWidget
• QMainWindow
• QDialog
  • Модальный диалог
  • Немодальный диалог
  • Полумодальное диалоговое окно

  QWidget

  Класс QWidget является базовым классом для всех объектов пользовательского интерфейса.

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

  QWidget имеет много функций-членов, но некоторые из них имеют несколько прямых функций: например, QWidget имеет атрибуты шрифта, но он никогда не используется сам по себе. Предоставляет практические функции для многих подклассов, которые его наследуют, таких как QLabel, QPushButton, QCheckBox и так далее.

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

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

  QMainWindow

  Класс QMainWindow предоставляет главное окно приложения с панелью меню, панелью инструментов и строкой состояния (например: IDE-Visual Studio, Qt Creator и т. Д., Которые обычно используются для разработки Qt).

  Главное окно предоставляет структуру пользовательского интерфейса для создания приложений. Qt имеет QMainWindow и связанные с ним классы для управления главным окном.

  QMainWindow имеет свой собственный макет. Мы можем использовать QMenuBar (строка меню), QToolBar (панель инструментов), QStatusBar (строка состояния) и QDockWidget (плавающее окно). Макет имеет центральную область, которая может быть занята любым небольшим окном.

  QDialog

  Класс QDialog является базовым классом для диалоговых окон.

  Диалоговое окно представляет собой форму верхнего уровня, которая в основном используется для краткосрочных задач и краткого общения с пользователями. QDialog может быть модальным или немодальным. QDialog поддерживает расширяемость и может предоставлять возвращаемые значения. Они могут иметь кнопки по умолчанию. QDialog также может иметь QSizeGrip в правом нижнем углу, используя setSizeGripEnabled ().

  Примечание: QDialog (и другие виджеты, которые используют типы Qt :: Dialog) используют родительские виджеты немного иначе, чем другие классы в Qt. Диалоговое окно всегда является виджетом верхнего уровня, но если у него есть родительский объект, его позиция по умолчанию находится в середине родительского объекта. Он также поделится записями панели инструментов с родительским объектом.

  Модальный диалог

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

  Наиболее распространенным способом отображения модального диалога является вызов его функции exec (). Когда пользователь закрывает диалог, exec () предоставит полезное возвращаемое значение, и управление потоком затем продолжится с того места, где был вызван exec (). Обычно, чтобы закрыть диалоговое окно и вернуть соответствующее значение, мы подключаем кнопку по умолчанию, например: кнопка «ОК» подключена к гнезду accept (), а кнопка «Отмена» подключена к гнезду reject (). В качестве альтернативы, мы можем подключить слот done () и передать его в Accepted или Rejected.

  Немодальный диалог

  Диалоговые окна, которые не имеют ничего общего с другими операциями окна в той же программе. Диалоговые окна поиска и замены в текстовом редакторе обычно не работают, что позволяет пользователям одновременно взаимодействовать как с главным окном приложения, так и с диалоговыми окнами. Вызовите show () для отображения немодального диалогового окна и немедленно верните управление вызывающей стороне.

  Если функция show () вызывается после того, как диалоговое окно скрыто, диалоговое окно будет отображаться в исходном положении, поскольку положение окна, определенное диспетчером окон, явно не указано программистом. ), А затем переместите диалоговое окно в эту позицию перед его отображением.

  Диалоговое окно Half Mode

  Вызовите setModal (true) или setWindowModality (), а затем покажите (). В отличие от exec (), show () немедленно возвращает вызывающему элементу управления.

  Для диалога прогресса очень полезно вызвать setModal (true), пользователь должен иметь возможность взаимодействовать с ним, например: отменить длительные операции. Если вы используете show () и setModal (true) для совместного выполнения длинной операции, вы должны периодически вызывать QApplication :: processEvents () во время выполнения, чтобы позволить пользователю взаимодействовать с диалоговым окном (см. QProgressDialog).

  Принципы использования

  • Если его нужно встроить в другие формы, он создается на основе QWidget.
  • Если это основная форма, она создается на основе QMainWindow.
  • Если это диалог верхнего уровня, он создается на основе QDialog.

  Сегодня я в основном объясняю сходства и различия между тремя, не все они описаны и используются, и они будут подробно объяснены в последующем фактическом боевом процессе, например: использование некоторых общих диалоговых окон — QFileDialog, QColorDialog, QMessageBox Как добавить строку меню, панель инструментов, плавающую форму и т. Д. В основную форму QMainWindow, QWidget и его подклассы-QLabel, QPushButton, QCheckBox и т. Д.

  Интеллектуальная рекомендация

  Qt -qdialog, qwidget реализация

  Модальное и немодальное состояние QDialog может быть достигнуто напрямую, здесь суммированы. Модель Qdialog Модульный не -модальный Qdialog очень прост, но он немного смущен Qwidget. В Qwidget нет exe.

  QTWINDOW QWIDGET QDIALOG

  QMainWindow： Класс QMainWindow предоставляет меню и окно приложения -State -Strip. Некоторые функции интегрированы. Когда пользователь нажимает на него, соответствующая функция слота вступит в силу. М.

  Qdialog, Qwidget реализация

  Модель Qdialog Не -Модальный Qdialog Модульный не -модальный Qdialog очень прост, но он немного смущен Qwidget. В Qwidget нет exec (), но и SetModal (). Обычно, так что вы понимаете, существует ли бол.

  Разница между QMainWindow и QWidget

  Разница между QMainWindow и QWidget После запуска QWidget остается только одна «страница», а после запуска QMainWindow генерируется «окно». Структура QMainWindow показана ниже.

  QT-программирование — использование виджетов (QWidget и QDialog)

  Виджет QT предоставляет только три базовых класса по умолчанию: QMainWindow, QWidget и QDialog. Эти три формы также наиболее часто используются. QMainWindow — это главное окно с панелью меню и панелью.

  При подготовке материала использовались источники:
  https://intuit.ru/studies/courses/3479/721/lecture/25565
  http://ilnurgi1.ru/docs/python/modules_user/pyqt/qtgui/qwidget.html
  https://russianblogs.com/article/2639107360/