QT自帶的Button無法滿足我們的審美，和需求，為此專案開發中經常需要自定義控制元件，以Button控制元件為例

聯絡作者 qq 843230304

效果圖（裡面的按鈕都是Button）：還有好多呢，你只需要自定義自己的圖片，很美觀哦

寫控制元件的時候，注意控制元件的屬性，不要在內部賦值或者修改，要丟擲訊號供外部處理修改（否則解綁了屬性）

使用舉例

                Button{
                    id:myBtn
                    anchors.verticalCenter: parent.verticalCenter
                    anchors.left: parent
 
.left
                    anchors.leftMargin: 30
                    pressedSource: 圖片按下的效果圖資源路徑
                    normalSource: 圖片正常的效果圖資源路徑

                    text:qsTr("按鈕名稱")
                    pixelSize:字型畫素
                    textRightImage:true //文字在按鈕右側（內部屬性）
                    rightMargin:50
 
//內部屬性
                    spacing:40//內部屬性
                    horizontalAlignment: Text.AlignRight
                    verticalAlignment: Text.AlignVCenter

                    onClicked: {
                        //
                    }
                }

附上QML原始碼

import QtQuick 2.0

Item {
    id:root

    property string
 
 normalSource: ""
    property string pressedSource: ""
    property string disableSource: ""

    property bool selectEnable: false
    property bool selectAuto: true
    property bool selected: false

    property string normalSelectSource: ""
    property string pressedSelectSource: ""

    //文字在圖片的方位
    property bool textUnderImage: false //文字在圖片下方
    property bool textOverImage: false  //文字在圖片上方
    property bool textLeftImage: false  //文字在圖片左方
    property bool textRightImage: false //文字在圖片右方

    property color textNormalColor: "white"
    property color textPressedColor: "white"
    property color textNormalSelectColor: "white"
    property color textPressedSelectColor: "white"
    property color textDisableColor: "gray"

    property alias textWidth: buttonText.width
    property alias textHeight: buttonText.height
    property alias text: buttonText.text
    property alias elide: buttonText.elide
    property alias horizontalAlignment: buttonText.horizontalAlignment
    property alias verticalAlignment: buttonText.verticalAlignment
    property int textHorizontalOffset: 0
    property int textVerticalOffset: 0
    property alias pixelSize: buttonText.font.pixelSize


    property int topMargin: 0
    property int bottomMargin: 0
    property int leftMargin: 0
    property int rightMargin: 0

    property int spacing: 0

    signal clicked

    signal pressed(real xPosition,real yPosition)

    signal pressAndHold

    signal released(real xPosition,real yPosition)
    signal positionChanged(real xPosition,real yPosition)


    implicitWidth: (textLeftImage || textRightImage) ? (leftMargin + image.width + spacing + buttonText.width + rightMargin) :
                                                       (leftMargin + image.width + rightMargin)
    implicitHeight: (textUnderImage || textOverImage) ? (topMargin + image.height + spacing + buttonText.height + bottomMargin) :
                                                        (topMargin + image.height + bottomMargin)
    Image{
        id: image
        visible: true
        x:textLeftImage ? (leftMargin + buttonText.width + spacing): leftMargin
        y:textOverImage ? (topMargin + buttonText.height + spacing) : topMargin
    }

    Text {
        id: buttonText
        x: textLeftImage ? (leftMargin) :
           textRightImage ? (leftMargin + image.width + spacing) :
                            (leftMargin + image.width/2-width/2 + textHorizontalOffset)
        y: textOverImage ? (topMargin) :
           textUnderImage? (topMargin + image.height + spacing) :
                           (topMargin + image.height/2-height/2 + textVerticalOffset)
        font.pixelSize: 30
    }

    state:"normal"
    states:[
        State{
            name:"normal"
            PropertyChanges {
                target:image
                source: normalSource
            }
            PropertyChanges {
                target:buttonText;
                color:textNormalColor
            }
            when:(enabled)&&(!selectEnable || (selectEnable && !selected)) && !imageMouseArea.pressed
        },
        State{
            name:"pressed"
            PropertyChanges {
                target:image
                source:pressedSource
            }
            PropertyChanges {
                target:buttonText;
                color:textPressedColor
            }
            when:(enabled)&&(!selectEnable || (selectEnable && !selected)) && imageMouseArea.pressed
        },
        State{
            name:"normalSelect"
            PropertyChanges {
                target:image;
                source: normalSelectSource
            }
            PropertyChanges {
                target:buttonText;
                color:textNormalSelectColor
            }
            when:(enabled)&&(selectEnable && selected) && !imageMouseArea.pressed
        },
        State{
            name:"pressedSelect"
            PropertyChanges {
                target:image;
                source:pressedSelectSource
            }
            PropertyChanges {
                target:buttonText;
                color:textPressedSelectColor
            }
            when:(enabled)&&(selectEnable && selected) && imageMouseArea.pressed
        },
        State{
            name:"disable"
            PropertyChanges {
                target:buttonText;
                color:textDisableColor
            }
            PropertyChanges {
                target:image;
                source:disableSource
            }
            when:!enabled
        }
    ]



    MouseArea {
        id: imageMouseArea
        anchors.fill: parent
        onPressed: {
            root.pressed(mouse.x,mouse.y);
        }
        onReleased: {
            root.released(mouse.x,mouse.y);
            if(selectEnable && selectAuto){
                selected = !selected;
            }
        }
        onPositionChanged:{
            root.positionChanged(mouse.x,mouse.y);
        }
        onClicked: {
            root.clicked();
        }
        onPressAndHold: {
            root.pressAndHold();
        }
    }
}