文章目錄

• QML編程之旅 -- 事件處理
• • 1、鼠標事件
  • 2、鍵盤事件
  • 3、輸入控件與焦點

QML編程之旅 – 事件處理

QML也可以對鍵鼠事件進行處理。因為QML程序更多的是用于實現觸摸式用戶界面，所以更多的是對鼠標（在觸摸屏上可能是手指）單擊的處理。

1、鼠標事件

與之前的窗口部件不同，在QML中如果一個元素想要處理鼠標事件，就要在其上放置一個MouseArea元素 。也就是說，用戶只能在MouseArea確定的范圍內進行鼠標的動作。

import QtQuick 2.0Rectangle { //定義一個矩形元素width: 50; height: 50 //寬高都是50color: "teal" //初始為藍綠色MouseArea { //定義MouseArea元素處理鼠標事件anchors.fill: parent //事件響應區充滿整個矩形/* 拖曳屬性設置 */ //(a)drag.target: parentdrag.axis: Drag.XAxisdrag.minimumX: 0drag.maximumX: 360 - parent.widthacceptedButtons: Qt.LeftButton|Qt.RightButton //(b)onClicked: { //處理鼠標事件的代碼if (mouse.button == Qt.RightButton) { //(c)/* 設置矩形為藍色并縮小尺寸 */parent.color = "blue";parent.width -= 5;parent.height -= 5;}else if((mouse.button == Qt.LeftButton)&&(mouse.modifiers & Qt.ShiftModifier)) { //(d)/* 把矩形重新設為藍綠色并恢復原來的大小 */parent.color = "teal";parent.width = 50;parent.height = 50;}else {/* 設置矩形為綠色并增大尺寸 */parent.color = "green";parent.width += 5;parent.height += 5;}}} }

2、鍵盤事件

在QML中，Keys屬性提供了基本的鍵盤事件處理。

Rectangle {property alias mouseArea: mouseAreawidth: 360height: 360MouseArea {id: mouseAreaanchors.fill: parent}Row { //所有圖標成一行橫向排列x:50;y:50spacing:30Rectangle { //第一個矩形元素（“音樂”圖標）id: musicwidth: 100; height: 100radius: 6color: focus ? "red" : "lightgray" //被選中（獲得焦點）時顯示紅色，否則變灰scale: focus ? 1 : 0.8 //被選中（獲得焦點）時圖標變大focus: true //初始時選中“音樂”圖標KeyNavigation.tab: play //(a)/* 移動圖標位置 */ //(b)Keys.onUpPressed: music.y -= 10 //上移Keys.onDownPressed: music.y += 10 //下移Keys.onLeftPressed: music.x -= 10 //左移Keys.onRightPressed: music.x += 10 //右移Text { //圖標上顯示的文本anchors.centerIn: parentcolor: parent.focus ? "black" : "gray" //被選中（獲得焦點）時顯黑字，否則變灰font.pointSize: 20 //字體大小text: "音樂" //文字內容為“音樂”}}Rectangle { //第二個矩形元素（“游戲”圖標）id: playwidth: 100; height: 100radius: 6color: focus ? "green" : "lightgray"scale: focus ? 1 : 0.8KeyNavigation.tab: movie //焦點轉移到“影視”圖標Keys.onUpPressed: play.y -= 10Keys.onDownPressed: play.y += 10Keys.onLeftPressed: play.x -= 10Keys.onRightPressed: play.x += 10Text {anchors.centerIn: parentcolor: parent.focus ? "black" : "gray"font.pointSize: 20text: "游戲"}}Rectangle { //第三個矩形元素（“影視”圖標）id: moviewidth: 100; height: 100radius: 6color: focus ? "blue" : "lightgray"scale: focus ? 1 : 0.8KeyNavigation.tab: music //焦點轉移到“音樂”圖標Keys.onUpPressed: movie.y -= 10Keys.onDownPressed: movie.y += 10Keys.onLeftPressed: movie.x -= 10Keys.onRightPressed: movie.x += 10Text {anchors.centerIn: parentcolor: parent.focus ? "black" : "gray"font.pointSize: 20text: "影視"}}} }

3、輸入控件與焦點

QML用于接收鍵盤輸入的有兩個元素：TextInput和TextEdit.

Rectangle {property alias mouseArea: mouseAreawidth: 360height: 360color: "lightgray" //背景設為亮灰色為突出文本框效果MouseArea {id: mouseAreaanchors.fill: parent}/* 以下直接使用定義好的復合組件，生成所需文本框控件 */TextBox { //“學號”文本框id: tBx1x:25; y:25focus: true //初始焦點之所在label: "學號" //設置提示標簽文本為“學號”text: focus ? "" : "請輸入內容..." //獲得焦點則清空提示文字，由用戶輸入內容KeyNavigation.tab: tBx2 //按【Tab】鍵焦點轉移至“姓名”文本框}TextBox { //“姓名”文本框id: tBx2x:25; y:60label: "姓名"text: focus ? "" : "請輸入內容..."KeyNavigation.tab: tBx1 //按【Tab】鍵焦點又回到“學號”文本框} }

QML 的事件處理，相對還是簡單，QML的編程與之前窗體的編程有很大的不同，思維方式上也不盡相同。多練習練習就會了。本文檔主要闡述了事件的一般處理方法。具體說明可以參考《Qt5開發與實例》中的相關內容。

總結

以上是生活随笔為你收集整理的QML编程之旅 -- 事件处理的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。