QML 之 button 修改字体颜色，ButtonStyle的使用方式

在QML 中，我们使用Button 这个控件的话，没有设计的话就会出现如下：

 那我们想改变样式的话，就要使用style：ButtonStyle，我们点击帮助文档，看到例子只写了background。

我们就模仿写出来它的lable。

写出来效果：

对应代码：

Button{
         id:button1;
         width: 80;
         height: 80;
         anchors.left: rect2.right;
         anchors.leftMargin: 20;
         anchors.top: rect2.top;
         text: "quit";

         style: ButtonStyle{
            background: Rectangle{
                implicitWidth: 40;
                implicitHeight: 30;
                color: "red"
                border.width: control.pressed? 5:3;
                border.color: (control.hovered || control.pressed)
                              ? "green":"#888888";

            }
            label: Item {
                anchors.fill: parent;
                Text {

                    text: button1.text;
                    anchors.centerIn: parent;
                    color: "blue";
                    font.pixelSize: 20;
                    font.weight: Font.DemiBold
                }
            }
         }
         onClicked: {
            Qt.quit();
         }
    }