Strange Image behaviour (Qt Quick 2)

Question

I have no ideas why or how it is happening, but the Z order is completely messed up. Here is minimal example which shows my problem. Testing machine is running on Windows 8 x64, Qt 5.1.

import QtQuick 2.0

Item {
id: root;

width: 800;
height: 800;

Background {
    id: background;

    anchors.fill: root;
    imageSource: "backgrounds/1.jpg";
}

MainView {
    id: mainView;

    anchors.fill: root;
}

BottomBar {
    id: bottomBar;

    anchors.bottom: root.bottom;
    anchors.left: root.left;
    anchors.right: root.right;
    height: 75;
}

Here is Background:

import QtQuick 2.0
import QtGraphicalEffects 1.0

Item {
id: root;

property alias imageSource: imageItem.source;

Image {
    id: imageItem;

    anchors.fill: root;
    fillMode: Image.PreserveAspectCrop;
    visible: false;
}

GaussianBlur {
    anchors.fill: root;
    source: imageItem;
    radius: 12;
    samples: 12;
    deviation: 5;
    cached: true;
}
}

MainView:

import QtQuick 2.0

Item {
id: root;

Rectangle {
    anchors.centerIn: root;
    width: 500;
    height: 500;

    color: "red";
}
}

And BottomBar:

import QtQuick 2.0

Item {
id: root;

Rectangle {
    anchors.fill: root;
    color: Qt.rgba(.07, .07, .07, .95);
}

The should be red square centered in the middle of 1.jpg and a 75px height line at the bottom of it, however square is not seen.

But if I delete Background element, everything is fine.

Thanks for help in advance.

Answer 1

Sorry, but I can't run it and check. But, indeed, as I read the code, everything looks good. Of course I could have overlooked something.

You are not using explicit z-ordering, so everything should be plainly along the top-bottom. If you do not see the rectangle, then it shouldn't be a problem of Z axis. Not seeing the rectangle at all can be a result of other bug. If the positions or anchors were miscalculated, yout rectangle could have ended up with proper Z, but Width=0, Height=0. But, as you have them hardcoded, it's rather impossible.

Another very important thing is - you have not said where do you observe the effect. Do you see it in the real running app, or in the Qt Designer or similar tool? Many times I've seen the QtDesigner really screwing up the rendering of a properly written and working screen. Be sure to check what the live application presents.

Btw. Have you tried inspecting he running layout with QtInspector? It will probably quickly show you where the rectangle has gone.

EDIT: Oh - and one more thing. Just in case, try this:

MainView {
    id: mainView;

    anchors.fill: background;
}

BottomBar {
    id: bottomBar;

    anchors.bottom: mainView.bottom;
    anchors.left: mainView.left;
    anchors.right: mainView.right;
    height: 75;
}

I've changed the anchors so that the frames are ordered explicitely. It is setting the layout dependencies as root <- Bkg <- MV <- BBar instead of having them all parallel and independent. If the layout works. If the rectangle is not seen in this setup, then there's something really screwed up elsewhere.