Qt 5.4 QML Button

Question

Button 简单使用

1. QML 中的 Button 和 QPushButton 类似，用户点击按钮会触发一个 clicked() 信号，在 QML 文档中可以为 clicked() 指定信号处理器，响应用户操作。
2. 要使用 Button ，需要引入 import QtQuick.Controls 1.1 。

代码举例：

import QtQuick 2.0
import QtQuick.Controls 1.1

Rectangle {
    width: 300;
    height: 200;
    Button {
        anchors.centerIn: parent;
        text: "Quit";
        onClicked: Qt.quit(); // 处理点击事件
    }
}

Qt5.4 QML 按键处理

所有从 Item 继承的元素都可以处理按键，比如 Rectangle ，比如 Button 。

Item 通过附加属性 Keys 来处理按键。Keys 对象是 Qt Quick 提供的，专门供 Item 处理按键事件的对象。它们有一个名字是 event 的 KeyEvent 参数，包含了按键的详细信息。如果一个按键被处理， event.accepted 应该被设置为 true 以免它被继续传递。

代码举例

这里举一个简单的例子，检测到 Escape 和 Back 键时退出应用，检测到数字键，就通过 Text 来显示对应的数字。代码如下：

import QtQuick 2.0

Rectangle {
    width: 300;
    height: 200;
    color: "#c0c0c0";
    focus: true;	//获取焦点
    Keys.enabled: true;	//启动键盘，默认就是 true。当该值为 false 时，键盘按键不可用
    Keys.onEscapePressed: Qt.quit();
    Keys.onBackPressed: Qt.quit();
    Keys.onPressed: {	//基本按键事件处理
        switch(event.key){
        case Qt.Key_0:
        case Qt.Key_1:
        case Qt.Key_2:
        case Qt.Key_3:
        case Qt.Key_4:
        case Qt.Key_5:
        case Qt.Key_6:
        case Qt.Key_7:
        case Qt.Key_8:
        case Qt.Key_9:
//Qt.Key_x 为一组枚举，利用枚举值的差获取当前按键的数字值，并将结果在 keyView 中进行显示
            keyView.text = event.key - Qt.Key_0;		
            break;//此处的 case 与 C++ case 语法相同。
        }
    }

    Text {	//定义 keyView
        id: keyView;
        font.bold: true;//显示粗体
        font.pixelSize: 24;	//字体大小
        text: qsTr("text");	//默认字符串
        anchors.centerIn: parent;
    }
}

示例中用到了 onPressed / onEscapePressed / onBackPressed 三个附加信号处理器，其中 onPressed 信号的参数是 event ，包含了按键信息，程序中使用 switch 语句与 Qt 对象的枚举值比较来过滤我们关注的按键。

其他属性

checkable

该属性设置 Button 是否可选。如果 Button 可选 checked 属性则保存 Button 选中状态。

iconName

iconName 属性指定图标的名字，如果平台的图标主题中存在该名字对应的资源， Button 就可以加载并显示它。iconSource 则通过 URL 的方式来指定 icon 的位置。 iconName 属性的优先级高于 iconSource 。

isDefault

isDefault 属性指定按钮是否为默认按钮，如果是默认的，用户按 Enter 键就会触发按钮的 clicked() 信号。

pressed

pressed 属性保存了按钮的按下状态。

menu

menu 属性，允许你给按钮设置一个菜单（此时按钮可能会出现一个小小的下拉箭头），用户点击按钮时会弹出菜单。默认是 null 。

action

action 属性，允许设定按钮的 action ，action 可以定义按钮的 checked ， text ，tooltip 等属性。默认是 null 。

activeFocusOnPress

activeFocusOnPress ，指定当用户按下按钮时是否获取焦点，默认是 false 。

style

style 属性用来定制按钮的风格，与它配套的有一个 ButtonStyle 类，允许你定制按钮的背景。