Пишем «плавающее» окно на qt. Часть 1
Обновлено 21.12.2023 для использования с Qt6.
Создавая программы, программист зачастую сталкивается с необходимостью вывода разнообразной информации на экран. Для этого обычно используются разнообразные всплывающие окна.
Если же необходимо показывать пользователю достаточно часто изменяющуюся информацию, например, скорость загрузки/скачивания информации, вывод какого-либо графика – то тут лучше использовать «плавающее» окно.
Сегодня с помощью QtCreator и C++ мы реализуем простое «плавающее» окно – часы. Работать мы будем в Windows 10.
Создание проекта
Откроем Qtcreator и создадим проект Qt Widgets Application (приложение Qt Widgets) для платформы Desktop.
Назовем его QtFloatWindow.
В качестве «Build System» оставим cmake.
Класс окна оставим без изменений.
Дождемся окончания работы CMake.
Пробный запуск
Сразу после создания, проект откроется в редакторе, нам нужно проверить собирается ли у нас проект в принципе.
Раскрываем папку с проектом и открываем файл mainwindow.cpp
Нажимаем Ctrl+R, будет запущена сборка проекта.
Если более серьезных ошибок не возникло и среда сборки у вас настроена верно, то появится такое вот окно:
Тест прошел успешно можно закрывать окно.
Добавление формы для плавающего окошка
Пришло время заняться непосредственно плавающим окном.
Добавим новую форму в проект. Для этого щелкаем правой кнопкой на строку с иконкой молотка и названием проекта и выбираем Add new…
В новом выбираем Qt и Qt Designer Form Class (Класс формы Qt Designer) и жмем Choose…
На следующей форме выбираем Widget и жмем Next
Задаем имя новой формы в поле Class name (Имя класса): FloatWindow
Жмем Next и сразу Finish
Откроется наша, только что созданная, форма:
В свойствах формы в блоке geometry задаем новые размеры формы, пусть это будет:
Width: 200
Height: 70Размеры окна, в редакторе, изменяться в соответствии с заданными размерами.
Тестирование новой формы
Если мы сейчас запустим сборку проекта, то после его запуска не увидим новую форму. Нам нужно вручную добавить код для его создания.
Откроем mainwindow.h
Добавим под самым нижним #include:
#include "floatwindow.h"Откроем mainwindow.cpp
В конец MainWindow::MainWindow(QWidget *parent) добавим:
FloatWindow *fwin = new FloatWindow();
fwin->show(); У нас получится:
#include "mainwindow.h"
#include "ui_mainwindow.h"
#include "floatwindow.h"
MainWindow::MainWindow(QWidget *parent)
: QMainWindow(parent)
, ui(new Ui::MainWindow)
{
ui->setupUi(this);
FloatWindow *fwin = new FloatWindow();
fwin->show();
}
MainWindow::~MainWindow()
{
delete ui;
}Запускаем проект Ctrl+R
Откроется наше большое окно, если вы его свернем, то под ним окажется наша новая форма:
Добавление компонентов на форму
Займемся внешним видом нашей формы, откроем её в редакторе и перетащим новый компонент Widget из области со списком компонентов.
Так же перетащим на Label на только что созданный Widget. Вы можете его перетащить и сбросить не только непосредственно на форму, но и на имя widget в списке компонентов формы.
В списке справа выбираем нашу форму – FloatWindow
Правой кнопкой вызываем меню и выбираем Lay Out -> Lay Out Horizontally.
В списке справа выбираем нашу форму – Widget
Правой кнопкой вызываем меню и выбираем Lay Out -> Lay Out Horizontally.
Выбираем widget и в поле objectName вводим новое значение для нее – centralwidget
Выбираем label и в поле objectName вводим новое значение для нее – clockLabel
Выбираем label
Обратите внимание, так как мы использовали Layout, то изменить размер Label мы не сможем.
В окне свойств пролистайте вниз до свойств QLabel
В поле Text вводим 00:00:00
В поле alignment для Horizontal выставляем AlignHCenter
Листаем вверх, находим пункт font, раскрывает его и выставляем размер шрифта равным 30
У нас получится следующее:
Уберем ненужные отступы, для этого в списке справа выделяем FloatWindow и пролистываем свойства до самого низа – Layout.
Меняем все значения равные 9 или 6 на 0, таким образом убирая ненужные отступы.
Повторяем тоже самое для centralwidget
Делаем из формы «плавающее» окно
Открываем floatwindow.cpp и добавляем код в конец метода
FloatWindow::FloatWindow(QWidget *parent)setStyleSheet("#centralwidget { background-color: rgba(255, 255, 255, 100); border:1px solid #eee; }");
setAttribute(Qt::WA_TranslucentBackground);
setWindowFlags(Qt::FramelessWindowHint|Qt::WindowStaysOnTopHint); Запускаем, чтобы проверить что получилось – Ctrl-R.
Вот у нас и получилось нечто похожее на «плавающее» окошко, правда сдвинуть его не получиться, так как заголовки и границы у формы мы скрыли.
Учим окно перемещаться по экрану
Давайте добавим код, позволяющий нам его перемещать по экрану.
Открываем floatwindow.cpp и добавляем в конец файла:
void FloatWindow::mousePressEvent(QMouseEvent *evt)
{
oldPos = evt->globalPos();
}
void FloatWindow::mouseMoveEvent(QMouseEvent *evt)
{
const QPoint delta = evt->globalPos() - oldPos;
move(x()+delta.x(), y()+delta.y());
oldPos = evt->globalPos();
}Нажимаем F4 и добавляем
QPoint oldPos;после
Ui::FloatWindow *ui;Добавляем
protected:
void mousePressEvent(QMouseEvent *evt);
void mouseMoveEvent(QMouseEvent *evt);после
private:
Ui::FloatWindow *ui;
QPoint oldPos;Добавляем
#include <QMouseEvent>После
#include <QWidget>Запускаем сборку Ctrl-R.
Вот и наше полупрозрачное окошко:
Просто щелкаем на нем левой кнопкой мыши и не отпуская перетаскиваем в нужное место на экране.
Заключение
Подведем итоги, мы узнали:
Как добавить еще одну форму к проекту;
Как правильно добавить компоненты на форму и настроить отступы;
Как превратить обычную форму в «плавающее» окно;
Добавили функционал перемещения окна в любое место экрана.
В следующем материале мы добавим контекстное меню для плавающего окна и заставим часы идти.
Готовый проект вы можете найти на GitFlick.
Добавить комментарий