qml自定义界面定制（二）从左到右，icon加文本按钮

/*

  从左到右，icon +文字的按钮

*/

import QtQuick 2.0

Rectangle {

    height: 50;

    width: parent.width

    signal iconClicked();

    signal iconEntered();

    signal iconExited();

    property alias iconSrc: icon.source

    property alias iconText: iconLabel.text

    Image {

        id: icon

        anchors.left: parent.left

        anchors.leftMargin: 10

        anchors.verticalCenter: parent.verticalCenter

    }

    Text {

        id: iconLabel

        color: "#3B3E50"

        font.pixelSize: 16

        elide: Text.ElideRight

        width: parent.width-icon.width +60

        anchors.left: icon.right

        anchors.leftMargin: 10

        anchors.verticalCenter: parent.verticalCenter

    }

    MouseArea {

        anchors.fill: parent

        hoverEnabled: true

        acceptedButtons: Qt.LeftButton

        onClicked:{

            iconClicked();

        }

        onEntered: {

            iconLabel.color = "#4E84F3"

            iconEntered();

        }

        onExited: {

            iconLabel.color = "#3B3E50";

            iconExited();

        }

    }

}