Question

Is there a way to make the window of a qml application transparent?

I’m looking for a detailed description on how to draw simple shapes with qml while making the window of the application transparent, as well as the background. A working source code demo would be awesome.

Answer 1

I finally found a simple way to draw a couple of red/blue rectangles while leaving the window transparent.

draw_rectangles.qml

import Qt 4.7

Item {
     Rectangle {
         opacity: 0.5
         color: "red"
         width: 100; height: 100
         Rectangle {
             color: "blue"
             x: 50; y: 50; width: 100; height: 100
         }
     }
 }

win.cpp:

#include <QApplication>
#include <QDeclarativeView>
#include <QMainWindow>

int main(int argc, char *argv[])
{
    QApplication app(argc, argv);
    QMainWindow window;

    QDeclarativeView* v = new QDeclarativeView;
    window.setCentralWidget(v);

    v->setSource(QUrl::fromLocalFile(("draw_rectangles.qml")));   

    window.setStyleSheet("background:transparent;");
    window.setAttribute(Qt::WA_TranslucentBackground);
    window.setWindowFlags(Qt::FramelessWindowHint);
    window.show();

    return app.exec();
}

win.pro:

TEMPLATE += app
QT += gui declarative
SOURCES += win.cpp

Save these files to the same directory and execute qmake followed by make to compile the application.