Qt5 - 動態加載Glow等特效

import QtQuick 2.0
import QtGraphicalEffects 1.0

Rectangle {
    width: 200; height: 200
    color: "black"

    Text {
        id: text
        anchors.centerIn: parent
        text: "Hello Qt!"
        font.pixelSize: 30
        color: "white"
    }

    Loader {
        id: loader
        focus: true
    }

    MouseArea {
        anchors.fill: parent
        onClicked: {
            console.log("Clicked")
            loader.sourceComponent = glowEffect
        }
    }

    Component {
        id: glowEffect
        Glow {
//            anchors.fill: parent
            x: text.x; y: text.y
            width: text.width; height: text.height

            source: text
            color: "red"
            radius: 10
            samples: 20
            visible: true

            NumberAnimation on spread {
                from: 0; to: 0.8; duration: 1000
                loops: NumberAnimation.Infinite
                easing.type: Easing.InOutQuad
            }
        }
    }
}

點擊加載glow特效

更改加載條件，滑過就加載，離開就卸載：

        MouseArea {
            id: mouseArea
            anchors.fill: parent
            hoverEnabled: true

            onClicked: {
                root.clicked()
                console.log("Clicked " + text.text)
            }
            onEntered: {
                loader.sourceComponent = glowEffect     // 加載
            }
            onExited: {
                loader.sourceComponent = loader.Null    // 卸載
            }
        }