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:

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.

Looks like this might be resolved in 5.1 by creating a widget as a container window using QWidget::createWindowContainer(). See the bug report and the commit. Am going to try and compile 5.1 from source and see if I can get it working. — andrewrjones
@MottiStrom Never found the answer, and moved on to using something else instead. — andrewrjones

Marcus Ottosson Marcus Ottosson · Accepted Answer · 2014-11-24T10:16:41

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
    }
}

Qt5 & QtQuick2 - transparent main window

4 Answers