QML:Transparency for an rectangle is not working

Question

How to set transparency of an rectangle/screen.

I have Following code:

// main.cpp
void main(int argc, char*[] argv)
{
    QApplication::setGraphicsSystem("raster");
    QApplication app(argc, argv);

    QDeclerativeView view;
    view.setSource(QUrl::fromLocalFile("loaderTest.qml"));

    view.setResizeMode(QDeclarativeView::SizeRootObjectToView);
    view.showFullScreen();

    //QRegion mask(10, 10,  100, 100);
    //view.setMask();

    view.show();
    app.exec();
}

And QML file is:

//loaderTest.qml
Rectangle
{
    id: mainRectangle
    width: 1000
    height: 700
    color: "transparent"
    //color: "#00000000"

    Image
    {
        id: image1;
        width: 348;
        height: 155;
        anchors.horizontalCenter: parent.horizontalCenter;
        anchors.verticalCenter: parent.verticalCenter;
        source: "test.png"
    }

    Loader
    {
        id: mainLoader
        anchors.fill: parent;
        source: "";
        focus: true;
    }
}

I have one loader and one image in this screen and background color is transparent. When i run this application it should display transparent background with image in the center (as i have not set loader source).

but what i am getting is image in center with white background filled in the screen, I don’t know who is filling in this white background color as i have mentioned transparent color as background.

I am using QT.4.7.0 and Linux.

I have two planes on my target system one is Video plane and another is graphics plane, when i run GUI with transparent background (set transparency at video place) it should display video on Video place in above example it is showing background as white, as it should have displayed video playing on Video plane.

Answer 1

By default the QDeclarativeView paints a background. Maybe that's the problem in your case.

From http://doc.qt.nokia.com/4.7/qdeclarativeperformance.html

You can also prevent QDeclarativeView from painting its window background if you will provide the background of your application using QML, e.g.

 QDeclarativeView window;
 window.setAttribute(Qt::WA_OpaquePaintEvent);
 window.setAttribute(Qt::WA_NoSystemBackground);
 window.viewport()->setAttribute(Qt::WA_OpaquePaintEvent);
 window.viewport()->setAttribute(Qt::WA_NoSystemBackground);

Answer 2

My first guess is that the background is white and your rectangle is indeed fully transparent.

What type is LoaderScreen, I guess it is some sort of QDecalarativeView, please forgive any technical misses have not coded Qt/QML for almost a year now. As I remember it the default background of the view was white and what kind of transparency are you hoping to achive anyways?

Answer 3

If you only set a background-color on a QPushButton, the background may not appear unless you set the border property to some value. This is because, by default, the QPushButton draws a native border which completely overlaps the background-color. This might show a black rectangular box around QPushButton. You will face this issue especially on Linux machines. In order to avoid this you can set the border property to none

widget->setStyleSheet("border:none");