1. 在style屬性中設(shè)置其 ButtonStyle對象的background屬性，用矩形作為其背景

import QtQuick 2.5
import QtQuick.Window 2.2
import QtQuick.Controls 1.4
import QtQuick.Controls.Styles 1.4

Window {
    id: window
    width: 500
    height: 500
    visible: true

    Button{
        id: button1
        text: "Quit"
        anchors.centerIn: parent
        onClicked:{                 //click信號
            console.log("button is pressed!")
        }
        style: ButtonStyle {
            background: Rectangle {
                implicitWidth: 75
                implicitHeight: 25
                border.width: control.activeFocus ? 2 : 1
                border.color: "green"
                radius: 4
                color: control.pressed ? "lightgrey" : "#eee"
            }
        }
    }

}

2. 通過Component組件來定義一個button樣式，然后通過設(shè)置style屬性值為其 id 來引用

Window {
    id: window
    width: 500
    height: 500
    visible: true

    Component{      //定義button 樣式組件
        id: btnStyle
        ButtonStyle {
            background: Rectangle {
                implicitWidth: 75
                implicitHeight: 25
                border.width: control.activeFocus ? 2 : 1
                border.color: (control.hovered || control.pressed)
                                ? "green" : "#888888";
                radius: 4
                color: control.pressed ? "lightgrey" : "#eee"
            }
        }
    }

    Button {
        id: btn1
        style: btnStyle
    }

    Button {
        id: btn2
        anchors.left: btn1.right
        anchors.leftMargin: 4
        style: btnStyle
    }

}

3.新建一個buttonStyle.qml 樣式文件，然后在其它文件通過文件名buttonStyle{} 來引用。

 import QtQuick 2.0

Item {
    id: button
    property string backColor      //自定義三個屬性
    property string borderColor
    property int borderWidth

    Rectangle{      //按鍵背景
        id: blueRec
        color: button.backColor
        opacity: 0.5
        width: 165
        height: 50
        border.color: button.borderColor
        border.width: button.borderWidth
        radius: 20

    }

    MouseArea{      //按鍵事件
        anchors.fill: blueRec
        hoverEnabled: true
        onEntered: {
            //                blueRec.color = "brown"
            blueRec.rotation = 45
            blueRec.border.color = "green"
            name.rotation = 45

        }
        onExited: {
            blueRec.rotation = 0
            blueRec.border.color = "black"
            name.rotation = 0
        }

        onClicked: {
            Qt.quit()
        }
    }

    Text {          //按鍵文本
        id: name
        text: qsTr("Hello <b> text </b>")
        anchors.centerIn: blueRec
        font.pixelSize: Math.round(blueRec.height/3)
        width: blueRec.width
        wrapMode: Text.WordWrap
    }

}