不能在列中使用DropShadow？

Question

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

“QML列：不能指定顶部，底部，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 
     } 
    } 
} 

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

你可以看到有标签的副本。这是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 
      } 
     } 
    } 
} 

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

Answer 2

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

尝试把阴影效果的标签内：

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{ 

} 

祝你好运！