QML：DropShadow 复制源矩形

Question

我正在尝试让我的水平矩形投下阴影。当我使用下面的代码执行此操作时，矩形重复，因此两行中有两个水平矩形。它显示在图像中（重复的一个是白色的）。如何去掉重复的矩形，只保留阴影和原始矩形？

Window {
    visible: true
    width: 640
    height: 480
    color: "white"

    Item {
        anchors.fill: parent

        ColumnLayout {
            id: layout
            anchors.fill: parent
            spacing: 0

            Rectangle {
              id: bar
              color: "blue"
              height: 40
              Layout.fillWidth: true
            }

            DropShadow {
                anchors.fill: bar
                horizontalOffset: 0
                verticalOffset: 3
                radius: 8.0
                samples: 12
                source: bar
                color: "blue"
            }

            Rectangle {
                Layout.fillHeight: true
                Layout.preferredWidth: parent.width
                color: "grey"
            }

        }
    }
}

Answer 1

没有重复的矩形，只有一个间隙。您正在使用一个布局，它将根据它们的大小布置其包含的项目。您确实锚定阴影以填充矩形，所以它就在哪里，但布局不应该以这种格式使用，因此在放置灰色矩形之前它会留下一个空白区域，阴影应该去。

如果您消除间隙，阴影不会显示，因为灰色矩形位于其顶部。修改z 值似乎也无济于事。这可能与使用布局有关。

如果你摆脱布局并使用锚定，你可以得到想要的结果，它允许你把灰色矩形放在第一位，这样它就可以在阴影下。

  Item {
    anchors.fill: parent
    Rectangle {
      anchors.bottom: parent.bottom
      anchors.top: bar.bottom
      width: parent.width
      color: "grey"
    }
    Column { // or you can put the layout here if you want
      id: bar
      anchors.top: parent.top
      width: parent.width
      Rectangle {
        color: "blue"
        height: 40
        width: parent.width
      }
      // other stuff
    }
    DropShadow {
      anchors.fill: bar
      horizontalOffset: 0
      verticalOffset: 3
      radius: 8.0
      samples: 12
      source: bar
      color: "blue"
    }
  }

Answer 2

将DropShadow 创建为Rectangle 子级：

Item {
    ColumnLayout {
        id: layout
        anchors.fill: parent
        spacing: 0

        Rectangle {
          id: bar
          color: "blue"
          height: 40
          Layout.fillWidth: true
            ...
            ...  // some buttons, images etc.

            DropShadow {
                anchors.fill: parent
                horizontalOffset: 0
                verticalOffset: 3
                radius: 8.0
                samples: 12
                source: bar
                color: "blue"
            }
        }
        ...
        ... // some other components to the layout ...
    }
}

您也可以将DropShadow 对象分配给layer.effect 属性：

Item {
    ColumnLayout {
        id: layout
        anchors.fill: parent
        spacing: 0

        Rectangle {
          id: bar
          color: "blue"
          height: 40
          Layout.fillWidth: true
            ...
            ...  // some buttons, images etc.
          
          layer.enabled: true  // Set Layer for Enable
          layer.effect: DropShadow {
                horizontalOffset: 0
                verticalOffset: 3
                radius: 8.0
                samples: 12
                source: bar
                color: "blue"
            }
        }
        ...
        ... // some other components to the layout ...
    }
}