Button和ButtnStyle

Button

import QtQuick 2.2
import QtQuick.Window 2.2
import QtQuick.Controls 1.2

Window {
    visible: true
    width: 640
    height: 480
    title: qsTr("Hello World")
    Rectangle {
        width: 300;
        height: 200;
        color: "#A0A0A0";

        Button {
            text:"Quit";
            anchors.centerIn:parent;
            onClicked:{
                Qt.quit();
            }
        }

     }
}

程序运行结果

点击Quit按钮，退出应用。

ButtonStyle

import QtQuick 2.2
import QtQuick.Window 2.2
import QtQuick.Controls 1.2
import QtQuick.Controls.Styles 1.2

Window {
    visible: true
    width: 640
    height: 480
    title: qsTr("Hello World")
    Rectangle {
        width: 300;
        height: 200;
        color: "#A0A0A0";

        Button {            text:"Quit";
            anchors.centerIn:parent;
            style: ButtonStyle{
                background: Rectangle {       //用来绘制一个填充矩形
                    implicitWidth: 100;       //隐式的宽度
                    implicitHeight: 100;
                    border.width: control.pressed ? 2:1;    //当control.pressed如果为true,就是2否则就是1
                    border.color: (control.hovered || control.pressed) ? "green":"red";     //当(control.hovered || control.pressed)为true，就是绿色，否则为红色。
                }
            }
            onClicked: Qt.quit();
            }
        }

     }

程序运行结果

当鼠标放在灰色区域显示如下，黄色箭头是模拟的鼠标。

当鼠标放到Quit框上的时候显示是这样的，用黄色的标记模拟了一下鼠标。