Так же, «плавающее» окно использует программа 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.
Вот и наше полупрозрачное окошко:
Просто щелкаем на нем левой кнопкой мыши и не отпуская перетаскиваем в нужное место на экране.
Заключение
Подведем итоги, мы узнали:
- Как добавить еще одну форму к проекту;
- Как правильно добавить компоненты на форму и настроить отступы;
- Как превратить обычную форму в «плавающее» окно;
- Добавили функционал перемещения окна в любое место экрана.
Вот и всё на сегодня. В следующем материале мы добавим контекстное меню для плавающего окна и заставим часы идти.
Готовый проект вы можете найти на github по ссылке.
