Пишем «плавающее» окно на qt5. Часть 1

Так же, «плавающее» окно использует программа Download Master. 

Создание проекта

Откроем Qtcreator и создадим проект Qt Widgets Application для декстопа.

Назовем его QtFloatWindow.

В качестве «Build System» выберем qmake.

Класс окна оставим без изменений.

Пробный запуск

Сразу после создания, проект откроется в редакторе, нам нужно проверить собирается ли у нас проект в принципе.

Раскрываем папку с проектом и открываем файл mainwindow.cpp

Нажимаем Ctrl+R, будет запущена сборка проекта.

Возможно в процессе сборки вы получите сообщение об ошибке:

Жмем Yes.

Это ошибка:

C:\msys64\mingw64\share\qt5\mkspecs\common\windows-vulkan.conf:1: error: Cannot find feature windows_vulkan_sdk

Её можно спокойно игнорировать, если, конечно, вы не используете Vulkan API для разработки под windows.

Если более серьезных ошибок не возникло и среда сборки у вас настроена верно, то появится такое вот окно:

Вот и всё, текст прошел успешно можно закрывать окно.

Добавление формы для плавающего окошка

Пришло время заняться непосредственно плавающим окном.

Добавим новую форму в проект. Для этого щелкаем правой кнопкой на название проекта и выбираем Add new…

В новом выбираем Qt и Qt Designer Form Class и жмем Choose…

На следующей форме выбираем Widget и жмем Next

Задаем имя новой формы в поле Class name: FloatWindow

Жмем Next и сразу Finish

Откроется наша, только что созданная, форма:

В свойствах формы в блоке geometry задаем новые размеры формы, пусть это будет:

Width: 200

Height: 70

Размеры окна, в редакторе, изменяться в соответствии с заданными размерами.

Тестирование новой формы

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

Откроем mainwindow.cpp

Добавим в начало файла:

#include "floatwindow.h"

В конец 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

Листаем вверх и выставляем размер шрифта равным 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>

В начало файла.

Запускаем сборку Ctrl-R.

Вот и наше полупрозрачное окошко:

Просто щелкаем на нем левой кнопкой мыши и не отпуская перетаскиваем в нужное место на экране.

Заключение

Подведем итоги, мы узнали:

1. Как добавить еще одну форму к проекту;
2. Как правильно добавить компоненты на форму и настроить отступы;
3. Как превратить обычную форму в «плавающее» окно;
4. Добавили функционал перемещения окна в любое место экрана.

Вот и всё на сегодня. В следующем материале мы добавим контекстное меню для плавающего окна и заставим часы идти.

Готовый проект вы можете найти на github по ссылке.