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

创建 DropShadow 为 Rectangle child:

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 object 分配给 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 ...
    }
}

Answer 2

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

如果去掉间隙，阴影不会显示，因为灰色矩形在它上面。修改 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"
    }
  }

QML：DropShadow 复制源矩形

QML: DropShadow duplicates the source rectangle

qt

shadow

qml