CODEWITHSUNDEEP
qtqmlqt5qtquick2
UldisK
UldisK

Reputation: 1639

Adding tabs dynamically in qml

I'm trying to dynamically create Tabs in QML. The code below is a simple example of what I want to do. 

import QtQuick 2.0
import QtQuick.Controls 1.0

ApplicationWindow{
    id:win

    TabView{
        id:tb
        anchors.fill:parent

        MouseArea{
            anchors.fill:parent
            onClicked:tb.loadTab()
        }

        Component{
            id:viewComp
            Rectangle{
                anchors.fill:parent
                color:"black"
            }
        }

        function loadTab(){
            var t=addTab("x",viewComp)
            t.item.color="blue" //line 20
        }
    }
}

Addition of the first Tab works as expected. However, after that any other Tab added triggers the error:

TypeError: Cannot set property 'color' of null`.

I tried to access the Tabwith getTab() to change the color, but I get the same error. Can someone explain what am I doing wrong?

Upvotes: 2

Views: 5293

Answers (3)

Daniel Barna
Daniel Barna

Reputation: 83

I am wondering if there is a way to enforce the construction of QML items. In onCompleted of the main window I am looping through all children recursively, and check if the factorySetting property is true. If so, I set it disabled (to be enabled by a password). However, I have nested TabViews, and it seems that until a Tab is not exposed, it is not constructed and the length of its children is zero, so that I can not recursively look into them. I could look for the QML object type and if it is Tab_QMLTYPE_xxxx then call object.active=1; on it. However, I have some customized Tabs which are defined for example in Adc.qml, and these objects are therefore named as Adc_QMLTYPE_xxx. Any proposals?

Upvotes: 0

SRedouane
SRedouane

Reputation: 508

better solution:

loadTab(){
    var c_tab=currentIndex
    var t=tb.addTab("x",viewComp)
    t.active = true;// real loading
    t.item.color="blue" 
}

Upvotes: 0

UldisK
UldisK

Reputation: 1639

Finally got around and tried to fix this and was successful. Decided to post as an answer in case someone stumbles on this from google and has a similar problem.

The solution was to set the currentIndex to the new Tab and then set properties of the Tab. This means that the function loadTab() looks like this:

loadTab(){
    var c_tab=currentIndex
    var t=tb.addTab("x",viewComp)
    currentIndex=count-1
    t.item.color="blue" 
    currentIndex=c_tab
}

This works nicely.

Upvotes: 3

Related Questions