QML notes on keyboard and mouse input

Setup a QML component to listen for mouse input

• Mouse button enum list

• To drag move an overflowed component, also try wrapping it inside a Flickable { }. If you need to set disable mouse in Flickable later , set interactive:false

• Button emits the signal clicked() canceled(), doubleClicked(), pressed(), released() and pressAndHold(), ref

• For more control

  • Example snippet
  • Two ways to find out which button is pressed:
    • .pressed .pressedButtons properties of MouseArea
    • mouse.button of MouseEvent inside some listeners function (not all has MouseEvent) eg onPressed:{ if(mouse.button==ENUM) }
  • To capture and propagate mouse events like preventdefault , event.stopPropagation(), return false in javascript:
    • Two types:
      • mouse.accepted=false inside onPressed:{}, onReleased:{} , onWheel:{} to allow propagtion
      • in MouseArea set propagateComposedEvents:true to allow propagtion thru this three listensers: onClicked:{} , onDoubleClicked:{} and onPressAndHold:{} , source
    • QML event behavior seem weird to js dev
      • trigger onPressed:{ mouse.accepted=false } then further handlers in the same MouseArea { } eg onReleased:{} will be ignored , see this post. Workaround: multiple duplicate components
      • to detect hover use hoverEnabled:true + onEntered:{}. Trigger it, then further down some handlers will work eg onPressed:{}, and some will be ignored eg onReleased:{}. Workaround: plz provide
      • trigger any onReleased:{} ,then all further handlers will be ignored. Workaround: arrange it under everything by eg moving code up, or assigning a lower z value
      • no mouse.accepted in onReleased:{}
  • No easy way to do this effect
    • While pressing down a mouse button to trigger onPressed:{}, the mouseEvent is "trapped" by MouseArea, moving to other MouseArea will not trigger their handlers, see this post. Workaround use one MouseArea to wrap components, this post; or QRubberBand ; or mouse move distance calc; or throw awayQtQuick, use WebEngine + WebChannel and standard js mouse events instead

setup a QML component to listen for keyboard input

Keys enum list
QML .focus:true may not mean what you think. see Item.focus and read up on FocusScope { }
Quick compare .focus, .activeFocus, forceActiveFocus(), FocusScope { }, see this stackoverflow
example snippet

related: setup keyboard shortcut in MuseScore from QML example in snippets page

example snippet