achieve multilayer design with QML

た入场券 2023-02-16 12:08 2阅读 0赞

You can achieve multilayer design using `layer` attached property as follow.  
Also you does not any limitation and you can use any qml item, use any `QtQuick.Controls` and style it as usual :)

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2RhbnhpYmFveHh4_size_16_color_FFFFFF_t_70][]

Image {
        id: bk
        source: "http://l7.alamy.com/zooms/7b6f221aadd44ffab6a87c234065b266/sheikh-lotfollah-mosque-at-naqhsh-e-jahan-square-in-isfahan-iran-interior-g07fw2.jpg"
    }
    
    Button {
        id: button
        anchors.centerIn: bk
        width: 210; height: 72
        visible: true
        opacity: 0.0
        layer.enabled: true
        layer.smooth: true
        onClicked: console.log("Clicked")
    }
    
    Rectangle {
        id: _mask
        anchors.fill: button
        color: "transparent"
        visible: true
        Text {
            font { pointSize: 20; bold: true }
            anchors.centerIn: parent
            text: "Hello World!"
        }
    
        layer.enabled: true
        layer.samplerName: "maskSource"
        layer.effect: ShaderEffect {
            property variant source: button
            fragmentShader: "
                    varying highp vec2 qt_TexCoord0;
                    uniform highp float qt_Opacity;
                    uniform lowp sampler2D source;
                    uniform lowp sampler2D maskSource;
                    void main(void) {
                        gl_FragColor = texture2D(source, qt_TexCoord0.st) * (1.0-texture2D(maskSource, qt_TexCoord0.st).a) * qt_Opacity;
                    }
                "
        }
    }

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2RhbnhpYmFveHh4_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/20200609202412975.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2RhbnhpYmFveHh4,size_16,color_FFFFFF,t_70