QML組件（二）

QtQML自定義組件之主菜單按鈕

效果如下

按鈕組件
m_ratio爲尺寸比例係數

 menuleftBtn.qml
/*!
 *@file menuleftBtn.qml
 *@description 左側頁面主鍵按鈕
 *@version 1.0
*/
import QtQuick 2.0

Item {
    id: replyBtn
    property bool _focus: false
    property string _imageSource:"qrc:/image/app-menu-icon-home.svg"

    signal btnClicked()
    width: 142 * m_ratio
    height: 120 * m_ratio
    z:1
    Rectangle{
        id: replyRect
        anchors.fill: parent
        color: "#565656"
        opacity: _focus ? 1 : 0.07
    }
    Image {
        id: replyImage
        sourceSize.width: 45 * m_ratio
        sourceSize.height: 45 * m_ratio
        anchors.centerIn: parent
        source: _imageSource
        opacity: _focus ? 1 : 0.35
    }
    MouseArea {
        id: replyArea
        hoverEnabled : true
        anchors.fill: parent
        onClicked: {
            btnClicked()
        }
        onEntered:{
            replyRect.opacity = 0.5
            replyImage.opacity = 0.7
        }
        onExited:{
                replyRect.opacity = _focus ? 1 : 0.07
                replyImage.opacity = _focus ? 1 : 0.35

        }
    }
    function focusChange(isfocus){
        if(isfocus){
            _focus = true
            replyRect.opacity = 1
            replyImage.opacity = 1
        }
        else{
            _focus = false
            replyRect.opacity = 0.07
            replyImage.opacity = 0.35
        }


    }
}

調用Component

//menuBtn
    Component{
        id:menuBtn
        Rectangle{
            width: appWidth
            height: appHeight / 3 * 2
            Rectangle {
                id: menuBtnItem
                anchors.left: parent.left
                anchors.top: parent.top
                width: homeBtn1.width;height:(homeBtn1.height + 2) * 4
                color: "black"
                Column{
                    spacing: 2 * m_ratio
                    MymenuBtn{
                        id: homeBtn1
                        Component.onCompleted: {homeBtn1.btnClicked.connect(start1)}
                    }
                    MymenuBtn{
                        id: homeBtn2
                        Component.onCompleted: {homeBtn2.btnClicked.connect(start2)}
                    }
                    MymenuBtn{
                        id: homeBtn3
                        Component.onCompleted: {homeBtn3.btnClicked.connect(start3)}
                    }
                    MymenuBtn{
                        id: homeBtn4
                        Component.onCompleted: {homeBtn4.btnClicked.connect(start4)}
                    }
                }
            }
            Rectangle{
                id:rectLine
                width: 10 * m_ratio
                height: homeBtn1.height
                color: color_Rosered
                x: homeBtn1.x + homeBtn1.width
                y: homeBtn1.y
            }
            YAnimator{
                id:homeanimationY; target: rectLine
                from: rectLine.y; to: homeBtn1.y
                duration: 300
                easing.type: Easing.InOutQuad
            }
            YAnimator{
                id:homeanimationY2; target: rectLine
                from: rectLine.y; to: homeBtn2.y
                duration: 300
                easing.type: Easing.InOutQuad
            }
            YAnimator{
                id:homeanimationY3; target: rectLine
                from: rectLine.y; to: homeBtn3.y
                duration: 300
                easing.type: Easing.InOutQuad
            }
            YAnimator{
                id:homeanimationY4; target: rectLine
                from: rectLine.y; to: homeBtn4.y
                duration: 300
                easing.type: Easing.InOutQuad
            }
            function start1(){
                homeanimationY.start()}
            function start2(){
                homeanimationY2.start()}
            function start3(){
                homeanimationY3.start()}
            function start4(){
                homeanimationY4.start()}
        }
    }

可以根據需求增加按鈕事件