在网上查找 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}
	}
	}