Ну что, друзья, вот мы и добрались до программирования стандартных графических приложений с помощью Qt5. В этом уроке мы попробуем создать наши первые программы, которые будут содержать такие графические элементы, как: кнопка, значок приложения, всплывающая подсказка, различные курсоры мыши, а также рассмотрим, как можно центрировать окно нашей программы и бегло коснёмся вопроса работы механизма «сигнал-слот».
Простой пример
А начнём мы с простого примера, который отображает на экране стандартное окно:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
#include <QApplication> #include <QWidget> int main(int argc, char *argv[]) { // Каждое Qt5-приложение (за исключением консольных) должно включать следующую строчку QApplication app(argc, argv); // Главный виджет, который представляет окно нашей программы QWidget window; window.resize(250, 150); // изменяем размер виджета window.setWindowTitle("Simple example"); // устанавливаем заголовок для главного окна window.show(); // выводим виджет на экране // С помощью метода exec() запускаем основной цикл нашей программы return app.exec(); } |
Результат выполнения программы выше:
Всплывающая подсказка
Всплывающая подсказка — это небольшой всплывающий прямоугольник с некоторым текстом, который появляется, когда вы наводите курсор на какой-нибудь элемент в приложении. В примере ниже мы создадим всплывающую подсказку для нашего основного окна:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
#include <QApplication> #include <QWidget> int main(int argc, char *argv[]) { QApplication app(argc, argv); QWidget window; window.resize(250, 150); window.move(300, 300); window.setWindowTitle("ToolTip"); // устанавливаем заголовок для окна window.setToolTip("QWidget"); // устанавливаем всплывающую подсказку для виджета window.show(); // выводим на экране return app.exec(); } |
Результат выполнения программы выше:
Иконка для приложения
В следующем примере мы зададим иконку для приложения. Большинство оконных менеджеров отображают этот значок в левом углу заголовка и на панели задач.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
#include <QApplication> #include <QWidget> #include <QIcon> int main(int argc, char *argv[]) { QApplication app(argc, argv); QWidget window; window.resize(250, 150); window.setWindowTitle("Icon"); window.setWindowIcon(QIcon("web.png")); window.show(); return app.exec(); } |
Для отображения иконки мы используем метод setWindowIcon() и класс QIcon. Иконка представляет собой небольшой .png файл, расположенный в текущем рабочем каталоге:
|
1 |
window.setWindowIcon(QIcon("web.png")); |
Результат выполнения программы выше:
Курсор
Курсор — это небольшой значок, отображающий на экране положение указателя мыши. В наших программах мы можем использовать различные виды курсоров. В следующем примере мы задействуем три фрейма, каждый из которых будет иметь свой курсор:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 |
#include <QApplication> #include <QWidget> #include <QFrame> #include <QGridLayout> class Cursors : public QWidget { public: Cursors(QWidget *parent = 0); }; Cursors::Cursors(QWidget *parent) : QWidget(parent) { QFrame *frame1 = new QFrame(this); // создаём виджет frame1->setFrameStyle(QFrame::Box); // устанавливаем рамки фрейма frame1->setCursor(Qt::SizeAllCursor); // задаём тип курсора SizeAllCursor для фрейма QFrame *frame2 = new QFrame(this); // создаём виджет frame2->setFrameStyle(QFrame::Box); // устанавливаем рамки фрейма frame2->setCursor(Qt::WaitCursor); // задаём тип курсора WaitCursor для фрейма QFrame *frame3 = new QFrame(this); // создаём виджет frame3->setFrameStyle(QFrame::Box); // устанавливаем рамки фрейма frame3->setCursor(Qt::PointingHandCursor); // задаём тип курсора PointingHandCursor для фрейма // Группируем все фреймы в одну строку QGridLayout *grid = new QGridLayout(this); grid->addWidget(frame1, 0, 0); grid->addWidget(frame2, 0, 1); grid->addWidget(frame3, 0, 2); setLayout(grid); } int main(int argc, char *argv[]) { QApplication app(argc, argv); Cursors window; window.resize(350, 150); window.setWindowTitle("Cursors"); window.show(); return app.exec(); } |
Результат выполнения программы выше:
Кнопка
В следующем примере мы добавим на нашу форму самую обычную кнопку. Нажатие на кнопку приведёт к закрытию приложения. И здесь же впервые будет использовано понятие сигналов и слотов:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 |
#include <QApplication> #include <QWidget> #include <QPushButton> class MyButton : public QWidget { public: MyButton(QWidget *parent = 0); }; MyButton::MyButton(QWidget *parent) : QWidget(parent) { QPushButton *quitBtn = new QPushButton("Quit", this); // создаём новую кнопку quitBtn->setGeometry(50, 40, 75, 30); // изменяем размеры кнопки и помещаем на форму окна connect(quitBtn, &QPushButton::clicked, qApp, &QApplication::quit); } int main(int argc, char *argv[]) { QApplication app(argc, argv); MyButton window; window.resize(250, 150); window.setWindowTitle("QPushButton"); window.show(); return app.exec(); } |
При нажатии на кнопку, генерируется сигнал clicked. Слот — это метод, который реагирует на сигнал. В нашем случае это будет слот quitBtn основного объекта приложения. QApp — это глобальный указатель на объект приложения. Он определён в заголовочном файле QApplication:
|
1 |
connect(quitBtn, &QPushButton::clicked, qApp, &QApplication::quit); |
Результат выполнения программы выше:
Взаимодействие виджетов
Мы заканчиваем этот урок примером, который демонстрирует возможность виджетов взаимодействовать друг с другом. Код данного примера разделён на три файла.
Следующий код является заголовочным файлом, в котором мы определяем два слота и виджет lbl.
plusminus.h:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 |
#pragma once #include <QWidget> #include <QApplication> #include <QPushButton> #include <QLabel> class PlusMinus : public QWidget { Q_OBJECT // этот макрос должен включаться в классы, которые объявляют свои собственные сигналы и слоты public: PlusMinus(QWidget *parent = 0); private slots: void OnPlus(); void OnMinus(); private: QLabel *lbl; }; |
У нас есть две кнопки и виджет lbl. С помощью кнопок мы увеличиваем или уменьшаем число, отображаемое в lbl.
plusminus.cpp:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 |
#include "plusminus.h" #include <QGridLayout> PlusMinus::PlusMinus(QWidget *parent) : QWidget(parent) { QPushButton *plsBtn = new QPushButton("+", this); QPushButton *minBtn = new QPushButton("-", this); lbl = new QLabel("0", this); QGridLayout *grid = new QGridLayout(this); grid->addWidget(plsBtn, 0, 0); grid->addWidget(minBtn, 0, 1); grid->addWidget(lbl, 1, 1); setLayout(grid); connect(plsBtn, &QPushButton::clicked, this, &PlusMinus::OnPlus); connect(minBtn, &QPushButton::clicked, this, &PlusMinus::OnMinus); } void PlusMinus::OnPlus() { int val = lbl->text().toInt(); val++; lbl->setText(QString::number(val)); } void PlusMinus::OnMinus() { int val = lbl->text().toInt(); val--; lbl->setText(QString::number(val)); } |
А здесь происходит соединение сигналов clicked с соответствующими слотами:
|
1 2 |
connect(plsBtn, &QPushButton::clicked, this, &PlusMinus::OnPlus); connect(minBtn, &QPushButton::clicked, this, &PlusMinus::OnMinus); |
В методе OnPlus() мы определяем текущее значение в lbl. Виджет lbl отображает строковое значение, поэтому сначала его нужно преобразовать в целое число. Затем мы это число увеличиваем, конвертируем получившееся число снова в строковое значение и устанавливаем новый текст для label:
|
1 2 3 4 5 |
void PlusMinus::OnPlus() { int val = lbl->text().toInt(); // выполняем конвертацию в тип int val++; // выполняем инкремент значения lbl->setText(QString::number(val)); // конвертируем обратно в Qstring и устанавливаем новый текст для label } |
А это уже наш основной файл — main.cpp:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
#include "plusminus.h" int main(int argc, char *argv[]) { QApplication app(argc, argv); PlusMinus window; window.resize(300, 190); window.setWindowTitle("Plus minus"); window.show(); return app.exec(); } |
Результат выполнения программы выше:
Заключение
В этом уроке мы создали наши первые графические программы с помощью Qt5, а в следующем уроке мы рассмотрим подключение стандартных меню и панелей инструментов (тулбаров).
Оценить статью:
(13 оценок, среднее: 5,00 из 5)
Загрузка...
Пишет, что С++ требует type specifier for all declarations.
Вообще я так посмотрел, без увернного знания С++ в QT делать нечего? Смотрю как баран на новые ворота на все жти квадраточия, наследования классов, т.п. Перывые пару уроков еще зашли, а дальше банальное "переписывание с доски"…эх…
Замкнутый круг, чтоб научиться прогать на С++ нужно уметь прогать на С++…
Добрый день. Подскажите пожалуйста в примере с курсорами в конструкторе класса Cursors задается стандартное значение указателя parent = 0. Можно ли туда заместо 0 передавать nullPtr?
Насчёт первого примера — лучше бы воспользоваться QHBoxLayout, всё-таки он чуть быстрее, да и нужны в группировке таблицей тут нет… А вообще да, спасибо за труд.
Т.е. в QT есть что-то типа garbage collector? А можно поподробнее, как он здесь работает?
В Qt есть есть класс, который является базовым для всех других классов и объектов. Называется он — QObject. Когда вы создаете свой класс или объект при помощи прямого наследования (непосредственно от QObject) или косвенного (через цепочку промежуточных классов, которые были наследованы от QObject), то вам становится доступен механизм связи объектов, а именно: организация в т.н. иерархии (или деревья объектов). Чтобы его задействовать, нужно при создании объекта-потомка передавать в качестве параметра указатель на объект-предок. И тогда, при удалении родительского объекта, Qt автоматически удалит и всех связанных с ним потомков.
Пример для наглядности:
Простите, вот я такой момент недопонял: в конструкторе классов создаются указатели с выделением памяти. Как потом очищается память? Если эти указатели были бы полями класса, инициализировались в конструкторе и в деструкторе delete`лись, я бы понял. А так получается утечка памяти, вроде как. Поясните этот момент, пожалуйста
>>Как потом очищается память?
Обратите внимание на второй параметр ("this") в примере ниже:
В данном случае "this" — это указатель на объект-предок. Если предок будет уничтожен, то Qt автоматически подчистит память за всеми связанными с ним объектами.
P.S.: В данной статье работа этого механизма не особо заметна, т.к. созданные нами объекты (кнопки, курсоры, подсказки и пр.) живут всё время работы программы. А после завершения работы приложения — операционная система сама позаботится об освобождении всех выделенных ресурсов.
Да, очень крутое объяснение, жду с нетерпением следующих уроков.
Спасибо. Новая статья уже передана на корректуру 🙂
Жду недождусь новых уроков. Спасибо огромное за Вашу работу.
Всегда пожалуйста 🙂