qmlqtquick2flickable

Access Flickable from parent element


I'm trying to call a function which is defined inside a Flickable element, but it seems impossible to access it by id. The following code produces ReferenceError: flickable is not defined when tab.getValues() is called:

import QtQuick 2.4

Tab {
    id: tab
    function getValues() {
        flickable.getValues()
    }
    Flickable {
        id: flickable
        clip: true
        flickableDirection: Flickable.VerticalFlick
        contentHeight: column.height
        topMargin: 2 * pxPermm
        function getValues() {
            console.log("flickable.getValues() called")
        }
        Column {
            id: column
            // some content
        }
    }
}

How else am I supposed to access the Flickable element? The function getValues() must be placed inside the Flickable because it needs to access elements placed inside the column.


Solution

  • That's a problem with Tab object. It's a Loader whose default property is sourceComponent. When you put a Flickable element inside it, it is converted* to Component and assigned. When your Tab object is viewed, it creates your Flickable object, which can be accessed via item property:

    function getValues() {
      if(tab.active)
        tab.item.getValues();
      else
        console.log("Tab is not viewed so item does not exists.");
    }
    

    That Flickable object have inherited, but different context than your Tab object. That means you can access tab from flickable, but not flickable from tab.