qml 实现图片倒影效果

 Image {

        id: img

        width: 241

        height: 241

        anchors {

            top: parent.top

            topMargin: 197

            left: parent.left

            leftMargin: 106

        }

        source: ""

        fillMode: Image.PreserveAspectFit

        visible: true

    }

    Image {

        id: reflectionImage

        source: img.source

        width: img.width

        height: img.height

        visible: true 

        anchors {

            top: img.bottom

            topMargin: img.height

            left: parent.left

            leftMargin: 106

        }

        transform: Scale {

            yScale: -1

        }

        layer.enabled: true

        layer.effect: OpacityMask {

            maskSource: Rectangle {

                width: reflectionImage.width

                height: reflectionImage.height

                gradient: Gradient {

                    GradientStop {

                        position: 0.5

                        color: "transparent"

                    }

                    GradientStop {

                        position: 1.7

                        color: "black"

                    }

                }

            }

        }

    }