奇怪的图像行为（Qt Quick 2）

Question

我不知道为什么或如何发生，但 Z 顺序完全搞砸了。这是显示我的问题的最小示例。测试机器在 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;
}

这是背景：

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

主视图：

import QtQuick 2.0

Item {
id: root;

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

    color: "red";
}
}

和底部栏：

import QtQuick 2.0

Item {
id: root;

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

应该是红色正方形，以 1.jpg 的中间为中心，底部有一条 75px 的高度线，但看不到正方形。

但是如果我删除背景元素，一切都很好。

提前感谢您的帮助。

Answer 1

抱歉，我无法运行并检查。但是，确实，当我阅读代码时，一切看起来都很好。当然，我可能会忽略一些东西。

您没有使用显式 z 排序，因此所有内容都应该清楚地位于顶部底部。如果看不到矩形，则应该不是 Z 轴的问题。根本看不到矩形可能是其他错误的结果。如果位置或锚点计算错误，则您的矩形可能会以正确的 Z 结束，但宽度 = 0，高度 = 0。但是，由于您对它们进行了硬编码，所以这是不可能的。

另一个非常重要的事情是 - 你没有说你在哪里观察到效果。你是在实际运行的应用程序中，还是在 Qt Designer 或类似工具中看到它？很多时候我看到 QtDesigner 真的搞砸了正确编写和工作的屏幕的渲染。请务必检查实时应用程序呈现的内容。

顺便说一句。您是否尝试过使用 QtInspector 检查他正在运行的布局？它可能会很快显示矩形的去向。

编辑：哦 - 还有一件事。以防万一，试试这个：

MainView {
    id: mainView;

    anchors.fill: background;
}

BottomBar {
    id: bottomBar;

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

我已经更改了锚点，以便明确地对框架进行排序。它将布局依赖项设置为 root