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

    }

}