QML中MouseArea元素的介紹

標籤：

原文：http://www.thisisqt.com/?action-viewnews-itemid-22

MouseArea元素的一個很典型的用法是和一個可視的item一起用，處理這個item的滑鼠響應。
在下例中我們將MouseArea放到Rectangle中，當單擊Rectangle地區中時，Rectangle顏色會變成紅色。
import Qt 4.7

 Rectangle {
     width: 100; height: 100
     color: "green"

     MouseArea {
         anchors.fill: parent
         onClicked: { parent.color = ‘red‘ }
     }
 }
很多時候，MouseArea地區會傳遞一個滑鼠事件作為參數，這個參數中包含了很多滑鼠事件資訊，例如，
單擊的位置，具體按下的一個滑鼠左鍵還是右鍵，以及一些鍵盤按鍵資訊。在下面的例子中，當Rectangle
地區被按右鍵時會觸發改變顏色。
Rectangle {
     width: 100; height: 100
     color: "green"

     MouseArea {
         anchors.fill: parent
         acceptedButtons: Qt.LeftButton | Qt.RightButton
         onClicked: {
             if (mouse.button == Qt.RightButton)
                 parent.color = ‘blue‘;
             else
                 parent.color = ‘red‘;
         }
     }
 }
對於其他鍵盤按鍵的處理，請參考Keys元素的介紹。
MouseArea是一個可見的item，但它本身並不顯示什麼。

屬性
acceptedButtons : Qt::MouseButtons
表示MouseArea響應的滑鼠按鍵。可取的值有以下三個：
Qt.LeftButton
Qt.RightButton
Qt.MiddleButton
預設值是Qt.LeftButton。acceptButtons屬性還可以接受以上三個值的或組合形式，如下例所示：
MouseArea { acceptedButtons: Qt.LeftButton | Qt.RightButton }

containsMouse : bool 唯讀
containsMouse屬性用來表明當前的滑鼠是否在MouseArea中。
注意如果當前滑鼠時MouseArea中，此時如果移動MouseArea，這個屬性不會自動更新，也就是說
containsMouse屬性值不會改變。另外如果hoverEnabled為假，只有當滑鼠被單擊時containsMouse
才是正確的。

drag.target : Item
read-onlydrag.active : bool
drag.axis : enumeration
drag.minimumX : real
drag.maximumX : real
drag.minimumY : real
drag.maximumY : real
drag.filterChildren : bool
drag屬性集讓item拖動變得很方便。其中drag.target用來指明可以拖動的目標item的id，
drag.active表明目標item當前是否正在被拖動。drag.axis用來說明是否可以水平拖動(Drag.XAxis)
或是垂直拖動(Drag.XAxis)或是兩者(Drag.XandYAxis)都允許。drag.minimum和drag.maximum用來
指明可以拖動的最小和最大距離。下面的例子中，Rectangle可以沿著x軸拖動。當拖動到右邊的時候
Rectangle的透明度會降低。
Rectangle {
     id: container
     width: 600; height: 200

     Rectangle {
         id: rect
         width: 50; height: 50
         color: "red"
         opacity: (600.0 - rect.x) / 600

         MouseArea {
             anchors.fill: parent
             drag.target: rect
             drag.axis: Drag.XAxis
             drag.minimumX: 0
             drag.maximumX: container.width - rect.width
         }
     }
 }

enabled : bool
enabled屬性工作表示item是否接受滑鼠事件。預設為真，即接受滑鼠事件。

hoverEnabled : bool
hoverEnabled屬性工作表明是否處理滑鼠移至上方事件。
預設情況下，只處理滑鼠的按鍵事件。如果hoverEnabled屬性為真則所有的滑鼠事件都會被處理，
即使滑鼠沒有被按下。這個屬性影響containMouse屬性，onEntered，onExited以及onPositionChanged訊號。

mouseX : real 唯讀屬性
mouseY : real 唯讀屬性
mouseX和mouseY屬性是當前滑鼠的位置。如果hoverEnabled屬性為假則只有當滑鼠按下時，mouseX和mouseY屬性
才有效。如果hoverEnabled屬性為真，則mouseX和mouseY只在下面兩種情況下才有效：
1.    沒有滑鼠按下，但滑鼠在MouseArea（containsMouse為真）。
2.    滑鼠按下並按住，即使滑鼠已經移動到MouseArea之外。
mouseX和mouseY是相對於MouseArea的座標。

pressed : bool 唯讀
pressed屬性工作表明當前MouseArea是否按下。

pressedButtons : MouseButtons 唯讀
顧名思義，pressedButtons表示當前按下的滑鼠是哪個鍵，具體取值如下：
Qt.LeftButton
Qt.RightButton
Qt.MiddleButton
下面的例子中，當單擊滑鼠右鍵時會顯示字元“right”。
Text {
     text: mouseArea.pressedButtons & Qt.RightButton ? "right" : ""
     horizontalAlignment: Text.AlignHCenter
     verticalAlignment: Text.AlignVCenter

     MouseArea {
         id: mouseArea
         anchors.fill: parent
         acceptedButtons: Qt.LeftButton | Qt.RightButton
     }
 }

訊號
MouseArea::onCanceled ()
當滑鼠事件沒有被接受或是被其他元素截獲時，MouseArea::onCanceled()會被調用。當有多個MouseArea處理輸入時
或是Flickable元素中包含一個MouseArea時，MouseArea::onCanceled()會顯得特別重要。如果在Flickable元素中包
含一個MouseArea時，當執行一些針對於按下訊號的邏輯處理然後又拖動滑鼠時，Flickable會從MouseArea中截獲滑鼠
事件。在這種情況下，當Flickable截獲了MouseArea的滑鼠事件時需要重設邏輯。

MouseArea::onClicked ( MouseEvent mouse )
當有單擊事件（在MouseArea中按下緊接著彈起）發生時，MouseArea::onClicked方法會被調用。

MouseArea::onDoubleClicked ( MouseEvent mouse )
當有雙擊事件（按下緊接著彈起然後再按下）發生時調用。在MouseArea::onDoubleClicked中如果將accepted屬性設定
為假，則在第二次單擊時onPressed、onReleased、onClicked仍會被調用，否則在第二次單擊時onPressed、onReleased、
onClicked不會被調用。

MouseArea::onEntered ()
當滑鼠進入MouseArea中時，MouseArea::onEntered()會被調用。預設情況下，只有當滑鼠在MouseArea中單擊時才會調用，
可如果將hoverEnabled設定為真，當滑鼠拖動至MouseArea時也會調用onEntered();

MouseArea::onExited ()
當滑鼠離開MouseArea中時，MouseArea:: onExited ()會被調用。預設情況下，只有當滑鼠在MouseArea中單擊時才會調用，
可如果將hoverEnabled設定為真，當滑鼠拖動至MouseArea時也會調用onExited ();

MouseArea::onPositionChanged ( MouseEvent mouse )
當滑鼠位置發生改變時會調用onPositionChanged，在這個方法中不會考慮MouseEvent參數的accepted屬性，也就是說所有的
滑鼠事件在這裡都會被處理，並不會因為某個滑鼠事件被拒絕了而不做處理。預設情況下，只有在滑鼠按下時才會調用onPositionChanged。
不過如果將hoverEnabled設定為真，當滑鼠移動時onPositionChanged也會被調用。

MouseArea::onPressed ( MouseEvent mouse )
當有滑鼠按下時onPressed會被調用。MouseEvent類型的參數提供有關按下時的滑鼠資訊，包括滑鼠的位置以及按下時對應的滑鼠按鍵。
參數mouse的accepted屬性決定了MouseArea是否要處理這個滑鼠事件。如果mouse的accept屬性被設定為假則直到下一個按下事件發生，
這這間任何滑鼠事件都不會發送給MouseArea。

MouseArea::onReleased ( MouseEvent mouse )
當有滑鼠彈起時會調用onReleased。MouseEvent類型的參數提供有關按下時的滑鼠資訊，包括滑鼠的位置以及按下時對應的滑鼠按鍵。

參數mouse的accepted屬性會被忽略不做處理。

QML中MouseArea元素的介紹