【qml】❤

徘徊彼岸花發表於2024-12-09

https://www.bilibili.com/video/BV1R4zRYnE29/?spm_id_from=333.880.my_history.page.click&vd_source=3b08e97e50222fa2ec22737f6dcb2202的一個QML實現

//HeartRound
import QtQuick
import QtQuick.Controls.Basic

Rectangle
{
    id:rect
    property string word:"Love"
    property real r: 25
    width:r
    height:r
    radius:r*0.5
    color:"transparent"
    transformOrigin:Item.Center

    Text
    {
        id:label
        anchors.fill: parent
        anchors.centerIn: parent.Center
        horizontalAlignment: Text.AlignHCenter
        verticalAlignment: Text.AlignVCenter
        text:word
        color:"black"
        font.pixelSize: 15
        font.bold: true
        font.italic: true
        opacity:1
    }

    states:
    [
        State
        {
            name:"st1"
            PropertyChanges {target:label;opacity:1;}
            PropertyChanges {target:rect;color:"transparent";width:r;height:r;radius:r*0.5;}
        },

        State
        {
            name:"st2"
            PropertyChanges {target:label;opacity:0;}
            PropertyChanges {target:rect;color:"red";width:r*2;height:r*2;radius:r;}
        }
    ]

    transitions:
    [
        Transition
        {
            from:"st1"
            to:"st2"
            NumberAnimation{target:label;properties: "opacity";duration:300}
            PropertyAnimation{target:rect;properties:"color,width,height,radius";duration:300}
            // ScaleAnimator{target:_rect;from:0.5;to:1;duration:500;running: true}
        },

        Transition
        {
            from:"st2"
            to:"st1"
            NumberAnimation{target:label;properties: "opacity";duration:300}
            PropertyAnimation{target:rect;properties:"color,width,height,radius";duration:300}
            // ScaleAnimator{target:_rect;from:1;to:0.5;duration:500;running: true}
        }
    ]

    function changeToSt2()
    {
        rect.state="st2"
    }

    function changeToSt1()
    {
        rect.state="st1"
    }

    MouseArea
    {
        anchors.fill: parent
        // onPressed:
        // {
        //     rect.state="st2"
        // }

        // onReleased:
        // {
        //     rect.state="st1"
        // }

        onClicked:
        {
            rect.state="st2"
        }
    }
}

//HeartSquare
import QtQuick

Rectangle
{
    id:rect
    property string word:"Love"
    property real r: 25
    width:r*2
    height:r*2
    color:"transparent"
    transformOrigin:Item.Center

    Text
    {
        id:label
        anchors.fill: parent
        anchors.centerIn: parent.Center
        horizontalAlignment: Text.AlignLeft
        verticalAlignment: Text.AlignVCenter
        text:word
        color:"black"
        font.pixelSize: 10
        font.bold: true
        font.italic: true
        opacity:1
    }

    states:
    [
        State
        {
            name:"st1"
            PropertyChanges {target:label;opacity:1;}
            PropertyChanges {target:rect;color:"transparent";rotation:0}
        },

        State
        {
            name:"st2"
            PropertyChanges {target:label;opacity:0;}
            PropertyChanges {target:rect;color:"red";rotation:45}
        }
    ]

    transitions:
    [
        Transition
        {
            from:"st1"
            to:"st2"
            NumberAnimation{target:label;properties: "opacity";duration:300}
            PropertyAnimation{target:rect;properties:"color,rotation";duration:300}
        },

        Transition
        {
            from:"st2"
            to:"st1"
            NumberAnimation{target:label;properties: "opacity";duration:300}
            PropertyAnimation{target:rect;properties:"color,rotation";duration:300}
        }
    ]

    function changeToSt2()
    {
        rect.state="st2"
    }

    function changeToSt1()
    {
        rect.state="st1"
    }

    MouseArea
    {
        anchors.fill: parent
        // onPressed:
        // {
        //     rect.state="st2"
        // }

        // onReleased:
        // {
        //     rect.state="st1"
        // }

        onClicked:
        {
            rect.state="st2"
        }
    }
}

//Main.qml
import QtQuick
import QtQuick.Controls.Basic

Window {
    width: 640
    height: 640
    visible: true
    title: qsTr("Hello World")

    property real _x:100
    property real _y:100
    property real _r:50
    HeartRound
    {
        id:hr1
        r:_r
        x:_x
        y:_y
        word:"I"
    }

    HeartRound
    {
        id:hr2
        r:_r
        x:_x+1.4142*r
        y:_y
        word:"Love"
    }

    HeartSquare
    {
        id:hs
        r:_r
        x:_x+0.7071*r
        y:_y+0.7071*r
        word:"You"
    }

    Button
    {
        id:change
        width:100
        height:50
        anchors.right: parent.right
        anchors.rightMargin: 20
        anchors.bottom: parent.bottom
        anchors.bottomMargin: 20
        text:"click me!!"

        onPressed:
        {
            hr1.changeToSt2()
            hr2.changeToSt2()
            hs.changeToSt2()
        }

        onReleased:
        {
            hr1.changeToSt1()
            hr2.changeToSt1()
            hs.changeToSt1()
        }
    }

}

相關文章