How to make a transparent window with Qt Quick?

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

Here is a simple example:

main.cpp:

#include <QtGui/QApplication>
#include "mainwindow.h"

int main(int argc, char *argv[])
{
    QApplication a(argc, argv);
    MainWindow w;
    w.show();

    return a.exec();
}

mainwindow.h:

#ifndef MAINWINDOW_H
#define MAINWINDOW_H

#include <QDeclarativeView>

class MainWindow : public QDeclarativeView
{
    Q_OBJECT

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

#endif // MAINWINDOW_H

mainwindow.cpp:

#include "mainwindow.h"

MainWindow::MainWindow(QWidget *parent)
    : QDeclarativeView(parent)
{
    // transparent background
    setAttribute(Qt::WA_TranslucentBackground);
    setStyleSheet("background:transparent;");

    // no window decorations
    setWindowFlags(Qt::FramelessWindowHint);

    // set QML file
    setSource(QUrl("main.qml"));
}

MainWindow::~MainWindow()
{
}

main.qml

import QtQuick 1.0

Rectangle {
    id: root

    width: 250
    height: 250

    // completely transparent background
    color: "#00FFFFFF"

    border.color: "#F00"
    border.width: 2

    Rectangle {
        id: ball

        height: 50; width: 50
        x: 100

        color: "#990000FF"
        radius: height / 2
    }

    SequentialAnimation {
        running: true; loops: Animation.Infinite
        NumberAnimation { target: ball; property: "y"; to: root.height - ball.height; duration: 1000; easing.type: Easing.OutBounce }
        PauseAnimation { duration: 1000 }
        NumberAnimation { target: ball; property: "y"; to: 0; duration: 700 }
        PauseAnimation { duration: 1000 }
    }
}

transp-qml.pro

QT += core gui declarative

TARGET = transp-qml
TEMPLATE = app


SOURCES += main.cpp\
           mainwindow.cpp

HEADERS += mainwindow.h

OTHER_FILES += main.qml

screenshot of result: