QML notes on javascript array, inheritance, keyboard and mouse input

Updated 3 weeks ago

QML list and javascript array

QML property declaration:

A list can only store QML objects:

Item {
    property list aList: [ ]
    aList2: [ ] //shorthand of above
}

A list is an object: typeof list == 'object'

An array is a variant:

Item {
    property var anArray: [ ]
}

_
inside QML functions:
same syntax as in standard javascript

Item {    
    function a(){
        var anArray=[ ]
    }
}

Class/Object inheritance, composition and .prototype

  • Cannot edit class/object as you would with .prototype in javascript, but see component creation.
  • Object.assign() (and spread function) also does not work, as opposed to stated on Qt webpage.

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