无法在 Column 中使用 DropShadow？

Question

我正在使用 QML 开发一个小应用程序，我需要在文本组件上有一个小的阴影，以使其更具可读性，但是当我将 DropShadow 添加到列中的标签时，它会引发错误：

"QML Column: Cannot specify top, bottom, verticalCenter, fill or centerIn anchors for items inside Column. Column will not function."

但是文本应该相互重叠，这是我的示例代码：

import QtQuick 2.2
import QtGraphicalEffects 1.0

Item {
    width: 100
    height: 200
    Column {
        Label {
            id: label1
            anchors.horizontalCenter: parent.horizontalCenter
            text: "First label"
        }
        DropShadow {
            anchors.fill: label1
            radius: 16
            samples: 32
            color: "#b0000000"
            source: label1
        }
        Label {
            id: label2
            anchors.horizontalCenter: parent.horizontalCenter
            text: "Second label"
        }
        DropShadow {
            anchors.fill: label2
            radius: 16
            samples: 32
            color: "#b0000000"
            source: label2
        }
    }
}

我是不是犯了什么错误？或者我不能在 Column 中使用 DropShadow？我应该使用 Item 而不是 Column 吗？提前致谢！

Answer 1

按照您现在的方式，阴影标签会占据自己的列，因此您不能使用 anchors.fill 关键字。

尝试将 DropShadow 放入标签内：

Label {
        id: label1
        anchors.horizontalCenter: parent.horizontalCenter
        text: "First label"
        DropShadow {
            anchors.fill: label1
            horizontalOffset: 1
            verticalOffset: 1
            radius: 1
            samples: 3
            color: "Red"
            source: label1
        }
   }

更好的是，将所有这些代码放在一个单独的文件中：DropShadowText.qml，并将其作为一个独特的组件使用：

DropShadowText{

}

祝你好运！

Answer 2

这里有几个问题。

第一个已经在您收到的错误消息中进行了解释；您不能在列中使用垂直锚点，并且 anchors.fill: parent 表示水平和垂直锚点。您可以改用 width 和 height 属性：

import QtQuick 2.2
import QtGraphicalEffects 1.0
import QtQuick.Controls 1.0
import QtQuick.Window 2.0

Window {
    width: 100
    height: 200
    visible: true

    Column {
        Label {
            id: label1
            anchors.horizontalCenter: parent.horizontalCenter
            text: "First label"
        }
        DropShadow {
            width: label1.width
            height: label1.height
            radius: 16
            samples: 32
            color: "#b0000000"
            source: label1
        }
        Label {
            id: label2
            anchors.horizontalCenter: parent.horizontalCenter
            text: "Second label"
        }
        DropShadow {
            width: label2.width
            height: label2.height
            radius: 16
            samples: 32
            color: "#b0000000"
            source: label2
        }
    }
}

但是，这引入了新问题：

可以看到有重复的标签。 DropShadow:

的文档对此进行了解释

Generates a colorized and blurred shadow image of the source and places it behind the original, giving the impression that source item is raised from the background.

因此，您可以在 label1 和 label2 上设置 visible: false。

下一个问题是 DropShadow 将被限制在 Label 的边界矩形内。对于 DropShadow 文档中的示例，这不是问题，因为内容的边界比实际项目的边界小得多：

由于组成文本的像素与 Label 的边界之间的距离不大，因此您必须自己考虑。

我怀疑这是最优雅的解决方案，但我不知道更好的解决方案：

import QtQuick 2.4
import QtQuick.Window 2.0
import QtQuick.Controls 1.0
import QtGraphicalEffects 1.0

Window {
    id: win
    width: 150
    height: 150
    visible: true

    Item {
        width: 100
        height: 200
        Column {
            Item {
                width: label1.implicitWidth + 20
                height: label1.implicitHeight + 20
                anchors.horizontalCenter: parent.horizontalCenter
                visible: false

                Label {
                    id: label1
                    text: "First label"
                    anchors.centerIn: parent
                }
            }
            DropShadow {
                width: label1.width
                height: label1.height
                radius: 4
                samples: 8
                color: "#b0000000"
                source: label1
            }
            Item {
                width: label2.implicitWidth + 20
                height: label2.implicitHeight + 20
                anchors.horizontalCenter: parent.horizontalCenter
                visible: false

                Label {
                    id: label2
                    text: "Second label"
                    anchors.centerIn: parent
                }
            }
            DropShadow {
                width: label2.width
                height: label2.height
                radius: 4
                samples: 8
                color: "#b0000000"
                source: label2
            }
        }
    }
}

请注意，我还减小了阴影的半径以使其更加明显。

无法在 Column 中使用 DropShadow？

Can't use DropShadow in Column?

qt

qml

qtquick2