鼠标区域元素（MouseArea Element）

继承于Item，为了与不同的元素交互，你通常需要使用MouseArea（鼠标区域）元素。这是一个矩形的非可视化元素对象，你可以通过它来捕捉鼠标事件。当用户与可视化端口交互时，mouseArea通常被用来与可视化元素对象一起执行命令。

  1. //此属性包含鼠标区域反应的鼠标按钮。
  2. 为了指定MouseArea将对多个按钮作出反应，使用“|”（or）运算符组合Qt：：MouseButtons标志值：
  3. MouseArea{acceptedButtons:Qt.LeftButton | Qt.righbutton}
  4. 为了指示接受所有可能的鼠标按钮，特殊值“Qt”。可以使用“所有按钮”：MouseArea { acceptedButtons: Qt.AllButtons }
  5. 默认 Qt.LeftButton.
  6. acceptedButtons : Qt::MouseButtons    
  7. containsMouse : bool    //鼠标悬停到控件上使能hoverEnabled =true时才能在不按下的时候获取到鼠标状态
  8. containsPress : bool
  9. cursorShape : Qt::CursorShape    //鼠标形状
  10. drag
  11. drag.active : bool
  12. drag.axis : enumeration
  13. drag.filterChildren : bool
  14. drag.maximumX : real
  15. drag.maximumY : real
  16. drag.minimumX : real
  17. drag.minimumY : real
  18. drag.smoothed : bool
  19. drag.target : Item
  20. drag.threshold : real
  21. enabled : bool
  22. hoverEnabled : bool    //鼠标悬停到控件上使能
  23. mouseX : real
  24. mouseY : real
  25. pressAndHoldInterval : int    //修改长按事件间隔
  26. pressed : bool
  27. pressedButtons : MouseButtons    //通过此属性& Qt.LeftButton可判断当前按下的鼠标状态是左右哪个
  28. preventStealing : bool
  29. //
  30. This property holds whether composed mouse events will automatically propagate to other MouseAreas that overlap with this MouseArea but are lower in the visual stacking order. By default, this property is false.
  31. MouseArea contains several composed events: clicked, doubleClicked and pressAndHold. These are composed of basic mouse events, like pressed, and can be propagated differently in comparison to basic events.
  32. 此属性决定合成的鼠标事件是否会自动传播到与此鼠标区域重叠但视觉堆叠顺序较低的其他鼠标区域。使用次属性时，视觉顶层的元素mousearea accepted=false，不能将鼠标点击事件拦截下来
  34. propagateComposedEvents : bool 
  35. scrollGestureEnabled : bool
  1. canceled()
  2. clicked(MouseEvent mouse)    //当鼠标按下并松开时触发
  3. doubleClicked(MouseEvent mouse)
  4. entered()
  5. exited()
  6. positionChanged(MouseEvent mouse)
  7. pressAndHold(MouseEvent mouse)//按下并不释放，长按默认800ms
  8. pressed(MouseEvent mouse)
  9. released(MouseEvent mouse)
  10. wheel(WheelEvent wheel)
  1.  Rectangle {
  2.         id: rect1
  3.         x: 12; y: 12
  4.         width: 76; height: 96
  5.         color: "lightsteelblue"
  6.         MouseArea {
  7.             id: area
  8.             width: parent.width
  9.             height: parent.height
  10.             onClicked: rect2.visible = !rect2.visible
  11.         }
  12.     }
  13.     Rectangle {
  14.         id: rect2
  15.         x: 112; y: 12
  16.         width: 76; height: 96
  17.         border.color: "lightsteelblue"
  18.         border.width: 4
  19.         radius: 8
  20.     }

mousearea1.pngmousearea2.png
注意
这是QtQuick中非常重要的概念，输入处理与可视化显示分开。这样你的交互区域可以比你显示的区域大很多。

  1. Rectangle {
  2.          width: 480
  3.          height: 320
  4.          Rectangle {
  5.              x: 30; y: 30
  6.              width: 300; height: 240
  7.              color: "lightsteelblue"
  9.              MouseArea {
  10.                  anchors.fill: parent
  11.                  drag.target: parent;
  12.                  drag.axis: "XAxis"
  13.                  drag.minimumX: 30
  14.                  drag.maximumX: 150
  15.                  drag.filterChildren: true //筛选子窗口，拖动事件在子窗口中是否有效
  16.                  onClicked: console.log("lightsteelblue Clicked")
  18.                  Rectangle {
  19.                      color: "yellow"
  20.                      x: 50; y : 50
  21.                      width: 100; height: 100
  22.                      MouseArea {
  23.                          anchors.fill: parent
  24.                          onClicked: console.log("yellow Clicked")
  25.                      }
  26.                  }
  27.              }
  28.          }
  29.      }


  1. Rectangle {
  2.          color: "yellow"
  3.          width: 100; height: 100
  5.          MouseArea {
  6.              anchors.fill: parent
  7.              onClicked: console.log("clicked yellow")
  8.              onDoubleClicked: {
  9.                  console.log("onDoubleClicked yellow")
  10.              }
  11.          }
  13.          Rectangle {
  14.              color: "blue"
  15.              width: 50; height: 50
  17.              MouseArea {
  18.                  anchors.fill: parent
  19.                  propagateComposedEvents: true
  20.                  onClicked: {
  21.                      console.log("clicked blue")
  22.                      mouse.accepted = false
  23.                  }
  24.                  onDoubleClicked: {
  25.                      console.log("onDoubleClicked blue")
  26.                      mouse.accepted = false
  27.                  }
  28.              }
  29.          }
  30.      }

image.png

键盘按键

  1. Keys.enabled: true
  2.     Keys.onEscapePressed: Qt.quit() //键入esc退出
  3.         Keys.onBackPressed: Qt.quit()   //键入回退退出
  4.             Keys.onPressed: {       //按键按下信号响应槽
  5.                 switch(event.key){
  6.                     case  Qt.Key_0:
  7.                     case  Qt.Key_1:
  8.                     case  Qt.Key_2:
  9.                     case  Qt.Key_3:
  10.                     case  Qt.Key_4:
  11.                     case  Qt.Key_5:
  12.                     case  Qt.Key_6:
  13.                     case  Qt.Key_7:
  14.                     case  Qt.Key_8:
  15.                     case  Qt.Key_9:
  16.                         event.accepted=true;
  17.                         keyView.text = event.key - Qt.Key_0
  18.                             break;
  19.                 }
  20.             }
  21. Keys.onReleased: {  //按键松开信号响应槽 需要focus属性才能使得元素获取到焦点
  22.     switch(event.key){
  23.         case  Qt.Key_0:
  24.         case  Qt.Key_1:
  25.         case  Qt.Key_2:
  26.         case  Qt.Key_3:
  27.         case  Qt.Key_4:
  28.         case  Qt.Key_5:
  29.         case  Qt.Key_6:
  30.         case  Qt.Key_7:
  31.         case  Qt.Key_8:
  32.         case  Qt.Key_9:
  33.             event.accepted=true;
  34.             keyView.text = event.key
  35.                 break;
  36.     }
  37. }