Question

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

“QML列：无法为列内的项目指定top，bottom，verticalCenter，fill或centerIn锚点。列不起作用。”

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

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
        }
    }
}

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

Answer 1

这里有几个问题。

第一个已经通过您收到的错误消息进行了解释;您不能在列中使用垂直锚点，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
        }
    }
}

然而，这引入了新的问题：

enter image description here

您可以看到标签有重复的内容。这在DropShadow：

的文档中有解释

生成源的彩色和模糊阴影图像并将其放在原始图像后面，给人的印象是源项目是从背景中提升的。

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

下一个问题是DropShadow将仅限于Label的边界矩形。使用DropShadow文档中的示例，这不是问题，因为内容的边界远小于实际项的边界：

enter image description here

由于构成文字的像素与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
            }
        }
    }
}

enter image description here

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

Answer 2

现在你的方式，投影标签将占据自己的列，因此你不能使用 anchors.fill 关键字。

尝试将DropShadow放在Label：

中

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{

}

祝你好运！

不能在列中使用DropShadow？

2 个答案: