我正在尝试为我的海关小部件创建一个框阴影效果,但是我找不到这样做的方法!
使用QGraphicsDropShadowEffect
类生成一个阴影,它是小部件本身形状的副本,并将该副本放在小部件后面。所以,当我为我的小部件设置50%的不透明度时,阴影可以透过小部件看到,我想要实现的是更像web CSS样式中的框阴影效果,例如:
生成css:
https://i.ibb.co/mG1XXG2/box-shadow-qt-ask1.png
QGraphicsDropShadowEffect生成:
https://i.ibb.co/y680RKx/box-shadow-qt-ask2.png
正如你所看到的,我的两个元素都有一个阴影,不透明度为50%,css生成没有阴影可见通过半透明div元素,但QGraphicsDropShadowEffect
生成的阴影可以看到半透明小部件,有一些方法来实现创建一个自定义阴影的行为像css框阴影,但在我的Qt/c++小部件?
一个作弊方法是将你的对象和投影组合成一个单独的项目。同时使整个对象不可见,你复制整个项目与一个虚拟的不透明面具。然后,你应用不透明度到不透明的掩码。
例如:
import QtQuick
import QtQuick.Controls
import Qt5Compat.GraphicalEffects
Page {
background: Rectangle { color: "#ccc" }
Frame {
id: butterflyWithBoxShadow
anchors.centerIn: parent
visible: false
padding: 15
background: Item {
Rectangle {
anchors.fill: parent
anchors.leftMargin: butterflyWithBoxShadow.padding * 2
anchors.topMargin: butterflyWithBoxShadow.padding * 2
color: "grey"
opacity: 0.5
}
}
Frame {
id: frame
padding: 1
background: Rectangle {
border.color: "blue"
border.width: 1
color: "#ffe"
}
Image {
id: butterfly
fillMode: Image.PreserveAspectFit
source: "https://www.arcgis.com/sharing/rest/content/items/185841a46dd1440d87e6fbf464af7849/data"
smooth: true
}
}
}
OpacityMask {
anchors.fill: butterflyWithBoxShadow
source: butterflyWithBoxShadow
invert: true
opacity: slider.value
}
Frame {
anchors.horizontalCenter: parent.horizontalCenter
y: parent.height * 8 / 10
background: Rectangle { }
Slider {
id: slider
from: 0
to: 1
value: 0.8
}
}
}
你可以在网上试试!