QML notes on keyboard and mouse input

2年前更新

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