在网上查找 qml 中实现倒影效果的相关内容时,国内网站有关的内容都是使用 ShaderEffect 实现的,且代码都是以图片 (Image) 为例。
在 GPbeta 的帮助下,找到了另一种使用 OpacityMask 实现倒影效果的方式,对控件和图片都有效果,在此记录一下。效果图如下。
# 代码实现
import QtQuick 2.4 | |
import QtQuick.Window 2.2 | |
import QtGraphicalEffects 1.0 | |
Rectangle { | |
id: main_container | |
width: 390 | |
height: 360 | |
property int offset: 0 | |
Rectangle { | |
// 控件本体 | |
id: content | |
color: "#8e44ad" | |
width: 140 | |
height: 140 | |
anchors.top: parent.top | |
anchors.topMargin: 20 | |
anchors.left: parent.left | |
anchors.leftMargin: 50 | |
} | |
OpacityMask { | |
// 控件阴影 | |
width: content.width | |
height: content.height | |
// 阴影定位 | |
anchors.top: content.bottom | |
anchors.topMargin: content.height + offset | |
anchors.left: content.left | |
source: content | |
maskSource: Rectangle { | |
width: content.width | |
height: content.height | |
gradient: Gradient { | |
GradientStop { position: 0.0; color: Qt.rgba(0,0,0,0) } | |
GradientStop { position: 1.0; color: Qt.rgba(0,0,0,0.9) } | |
} | |
} | |
transform: Scale { yScale: -1} | |
} | |
Image { | |
// 图片本体 | |
id: img | |
width: 140 | |
height: 140 | |
source: "test.png" | |
anchors.top: parent.top | |
anchors.topMargin: 20 | |
anchors.left: content.right | |
anchors.leftMargin: 20 | |
} | |
OpacityMask { | |
// 图片阴影 | |
width: img.width | |
height: img.height | |
// 阴影定位 | |
anchors.top: img.bottom | |
anchors.topMargin: img.height + offset | |
anchors.left: img.left | |
source: img | |
maskSource: Rectangle { | |
width: img.width | |
height: img.height | |
gradient: Gradient { | |
GradientStop { position: 0.0; color: Qt.rgba(0,0,0,0) } | |
GradientStop { position: 1.0; color: Qt.rgba(0,0,0,0.9) } | |
} | |
} | |
transform: Scale { yScale: -1} | |
} | |
} |