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

没有重复的矩形，只有一个空白。您正在使用布局，该布局将根据其大小放置其包含的项目。你可以锚定阴影来填充矩形，这就是它的位置，但是布局不应该以这种格式使用，因此在放置灰色矩形之前，它会留下一个空白的空间，阴影应该放在那里。 / p>

如果你摆脱了间隙，阴影就不会显示，因为灰色矩形在它上面。修改:input_html => {:class => 'datepicker'}值似乎也没有帮助。它可能与使用布局有关。

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

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.effect: DropShadow {
                horizontalOffset: 0
                verticalOffset: 3
                radius: 8.0
                samples: 12
                source: bar
                color: "blue"
            }
        }
        ...
        ... // some other components to the layout ...
    }
}

QML：DropShadow复制源矩形

2 个答案: