qml按钮样式设计，把样式写成组件

通过Button的style属性可以设置按钮的样式如下：

style: ButtonStyle {
            //进行对Button的样式设置
            background: Rectangle {

                //设置圆角
                radius: 5;
                color: "red"
                border.width: control.pressed ? 2:1
            }
        }
但是如果多个按钮同时用到，上面的方式显得烦琐，此时我们可以使用Component在QML文档内定义一个组件


设置其id为btnStyle然后在按钮设置样式时直接使用

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

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

    //组件
    Component {
        id: btnStyle
        ButtonStyle {
            background: Rectangle {
                implicitWidth: 70
                implicitHeight: 25
                color: "black"
                border.width: control.pressed ? 8:4
                border.color: (control.hovered || control.pressed) ? "red" : "green"
            }
        }
    }

    Button {
        id: up
        width: 400
        height: 100
        anchors.top: parent.top
        anchors.topMargin: 50
        anchors.left: parent.left
        anchors.leftMargin: 120
        style: btnStyle
    }

    Button {
        id: mid
        width: 400
        height: 100
        anchors.left: up.left
        anchors.top: up.bottom
        anchors.topMargin: 40
        style: btnStyle
    }

    Button {
        id: down
        width: 400
        height: 100
        anchors.left: up.left
        anchors.top: mid.bottom
        anchors.topMargin: 40
        style: btnStyle
    }
}