QML：DropShadow 复制源矩形

Posted 2023-02-16

【中文标题】QML：DropShadow 复制源矩形

【英文标题】：QML: DropShadow duplicates the source rectangle

【发布时间】：2018-04-03 08:09:40

【问题描述】：

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

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"
            

        
    

【问题讨论】：

我得到以下信息：imgur.com/a/IAoXy，我没有发现问题，在这些情况下，您需要提供minimal reproducible example

@eyllanesc 你没有白色背景吗？复制的矩形是白色的，虽然我的例子中的原始矩形是蓝色的，背景是灰色的。

可能之前的图片不够充分，但这张图片更具描述性：imgur.com/a/SmY1i

是的，我明白了，然后我会尝试在问题中的代码中添加更多内容。

测试显示的代码是否重现了您的错误。

【参考方案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"
    
  

【参考方案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 ...
    

【讨论】：

当我使用这段代码时，没有重复的矩形，但也没有阴影。我更新了代码，所以它是可重现的。