Qt5 & QtQuick2 - transparent main window

Question

I am trying to create a simple Qt UI with a frameless window and rounded corners. Starting from a new project with the QtQuick 2 Application template, my code looks like this:

main.cpp

#include <QtGui/QGuiApplication>
#include "qtquick2applicationviewer.h"

int main(int argc, char *argv[])
{
    QGuiApplication app(argc, argv);

    QtQuick2ApplicationViewer viewer;

    viewer.setMainQmlFile(QStringLiteral("qml/qtquick-test/main.qml"));
    viewer.setFlags(Qt::FramelessWindowHint);
    viewer.showExpanded();

    return app.exec();
}

main.qml

import QtQuick 2.0

Rectangle {
    width: 360
    height: 360
    radius: 10
    color: "red"

    Text {
        text: qsTr("Hello World")
        anchors.centerIn: parent
    }
    MouseArea {
        anchors.fill: parent
        onClicked: {
            Qt.quit();
        }
    }
}

And this is the result:

What I wan't to do is get rid of the white corners, by making the main window transparent. However, as far as I can tell there is no way in Qt5 to do this, because we don't have stylesheets, etc and I am not using a QtWidget. Should I use a QtWidget?

Btw, I'm new to Qt and Qt5.

Answer 1

This works for me under Windows 8 and Ubuntu 12.04.

import QtQuick 2.3
import QtQuick.Window 2.2

Window {
    width: 300
    height: 300
    flags: Qt.FramelessWindowHint | Qt.Window
    color: "transparent"

    Rectangle {
        color: "brown"
        anchors.fill: parent
        anchors.margins: 10
    }
}

Answer 2

For anyone who stumbles upon this late like I did. For C++ and Python atleast you have to specify the widget attribute WA_TranslucentBackground to be able to make your background transparent.

Answer 3

You have to use
viewer.setMask()
in order to tell the qt widget that displays the qml where to draw and where not to....

I've used mostly rectangular masks but setMask accepts a QRegion which i think supports more complicated forms and even bitmap mask

Answer 4

Set the background clear color to have an alpha of 0 on your application viewer:

viewer.setColor(QColor(0, 0, 0, 0));