Создаём форму с поддержкой прозрачности на Qt Widgets

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

Введение

Для работы мы будем использовать свободную официальную IDE для разработки на C++/Qt — Qt Creator.

Код из наших примеров корректно компилируется и работает как в Qt 4.x, так и в 5.x. Лицензия всех фрагментов кода из данной статьи — GNU General Public License version 3.

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

Создайте новый проект на Qt: File -> New file or Project -> Application -> Qt Widgets Application. Названия и пути укажите произвольные.

Редактирование формы

1. Откройте главную форму созданного проекта в режиме Design.

2. Внутри centralWidget добавьте новый Widget. Удалите созданные по умолчанию menuBar, mainToolBar и statusBar. Все нужные вам элементы создавайте только внутри widget.

3. Выберите объект MainWindow класса QMainWindow, затем в редакторе свойств найдите поле styleSheet и нажмите справа от него кнопку с многоточием () для запуска встроенного редактора каскадных таблиц стилей.

4. В открывшемся окне редактора стилей пропишите следующий код:

QWidget#widget
{
	border-style: solid;
	border-top-style: none;
	border-width: 1px;
	border-color: rgb(0, 100, 150);
	border-bottom-left-radius: 5px;
	border-bottom-right-radius: 5px;
	background-color: qlineargradient(spread:pad, x1:0, y1:0, x2:1, y2:1, stop:0 rgba(128, 128, 128, 255), stop:1 rgba(225, 225, 225, 180));
}

5. Нажмите кнопку OK.

Если всё сделано верно, то стиль будет применён немедленно.

Редактирование основного кода

Откройте файл mainwindow.cpp в штатном редакторе кода и создайте новый метод:

void MainWindow::setFormStyle()
{
    // Скрываем элементы управления и рамку окна...
    setWindowFlags(Qt::FramelessWindowHint | Qt::Tool);

    // Включаем прозрачность главной формы...
    setAttribute(Qt::WA_TranslucentBackground);

    // Задаём параметры прозрачности...
    QGraphicsDropShadowEffect* shadowEffect = new QGraphicsDropShadowEffect(this);
    shadowEffect -> setBlurRadius(9.0);
    shadowEffect -> setColor(QColor(0, 0, 0, 160));
    shadowEffect -> setOffset(4.0);
    ui -> widget -> setGraphicsEffect(shadowEffect);
}

Не забудьте описать его в private slots заголовочного файла этой формы (mainwindow.h):

#ifndef MAINWINDOW_H
#define MAINWINDOW_H

#include <QMainWindow>

namespace Ui {
class MainWindow;
}

class MainWindow : public QMainWindow
{
    Q_OBJECT

public:
    explicit MainWindow(QWidget *parent = 0);
    ~MainWindow();

private slots:
    void setFormStyle();

private:
    Ui::MainWindow *ui;
};

#endif // MAINWINDOW_H

Теперь добавьте вызов созданного метода в функцию создания формы (mainwindow.cpp):

MainWindow::MainWindow(QWidget *parent) : QMainWindow(parent), ui(new Ui::MainWindow)
{
    ui -> setupUi(this);
    this -> setFormStyle();
}

Скомпилируйте и запустите своё приложение.

3 commentary to post

  1. Класс! Для новичков. Все работает. Единственное надо указать, что в mainwindow,cpp должна быть строка: #include а при использовании MainWindow вместо Widget отображение меняем на:
    ui->centralWidget->setGraphicsEffect(shadowEffect);

  2. Добрый день! Вместо прозрачности форма становится черной, не подскажите в чем дело?

    1. В новых версиях Qt Creator такое иногда встречается при множественных сохранениях формы. Видимо значение по умолчанию какого-то свойства формы или виджета изменяется.

      Попробуйте наш пример.

Обсуждение закрыто.