Ну что, друзья, вот мы и добрались до программирования стандартных графических приложений с помощью 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, а в следующем уроке мы рассмотрим подключение стандартных меню и панелей инструментов (тулбаров).
Оценить статью:
(6 оценок, среднее: 5,00 из 5)
Загрузка...
Да, очень крутое объяснение, жду с нетерпением следующих уроков.
Спасибо. Новая статья уже передана на корректуру 🙂
Жду недождусь новых уроков. Спасибо огромное за Вашу работу.
Всегда пожалуйста 🙂