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 } }