Array not accessible

jozzan

Hi all,
I've been trying to solve my problem for several days now with a lot of different approaches but it seems to not like me.
So the overall problem is that I want to have a list with tabs that I can click so that whenever another tab open the other one open closes (so that it's only possible that one is open). So right now I ended up calling a function to handle the close operations on all the other tabs (setting their state to "inactive").

@
Component.onCompleted: {
console.log(repeater.children.length) // returns 0
}

Column{
    id:container
    Repeater{
        id: repeater
        model: tabs.length
        ListTab{
            text: tabs[index]
            expandSize: tabbedList.height - rowSize * (repeater.count - 1)

            // here it's called!
            onStateChanged: evStages(index)  
        }
    }
}

// the function to close all other tabs

function evStages(index){
    for(var i = 0; i < repeater.model.length; i++){
        if(i != index){
            repeater.children[i] = "inactive"
        }
    }
}

@

I'm using Qt 5.3.1.

Thanks in advance

SGaist

Hi and welcome to devnet,

@model: tabs.length@

probably is the key to your problem

jozzan

Okay, thanks, this at least returns length 2 but setting the repeaters childs state to "inactive" still doesn't work!?

jozzan

Ohh srry, made a mistake. The line where I change the state actually says:
@repeater.children[i].state = "inactive"@
But this results in an error:
@TypeError: Type error@

I've also tried to work around it in various ways but some of these work arounds make my architecture less modular which is absolutely not what I want. So managing to evaluate this statement right would carry high benefit in design ways.

(I would eventually like to use this widgets in a few more applications)

I changed the line to:
@repeater.itemAt(i).state = "inactive"@

which seems to do what I want.
But now I guess, due to I eagerly change the state of the ListTab, it calls the function in the creation process which leads to null pointers.
So I removed the line where I change the state in my ListTab.qml file and added this to the TabbedList.qml file:
@
Component.onCompleted: {
for(var i = 0; i < tabs.length; i++){
//repeater.itemAt(i).state = "inactive"
console.log(repeater.itemAt(i))
}
}
@

and this now returns that:
@
qml: ListTab_QMLTYPE_1(0xfd6b30)
qml: ListTab_QMLTYPE_1(0x868c80)
@
Which seems valid but it doesn't solve my problem. Any advice?

Just to give you a clear overwiew:
TabbedList.qml:
@import QtQuick 2.0

Rectangle {
id: tabbedList
height: 500
width: 200
color: "gray"
//property var tabs: 2
property var rowSize: 50
property var tabs: ["Kunden", "Bestellungen"]

Component.onCompleted: {
    for(var i = 0; i < tabs.length; i++){
            //repeater.itemAt(i).state = "inactive"
            console.log(repeater.itemAt(i))
    }
}

Column{
    id:container
    Repeater{
        id: repeater
        model: tabs.length
        ListTab{
            text: tabs[index]
            expandSize: tabbedList.height - rowSize * (repeater.count - 1)
            onStateChanged: evStages(index)
        }
    }
}

function evStages(index){
    //console.log("lol")
    for(var i = 0; i < tabs.length; i++){
        if(i != index){
            repeater.itemAt(i).state = "inactive"
            console.log(repeater.itemAt(i))
        }
    }
}

}
@
ListTab.qml:
@import QtQuick 2.0

Rectangle {
id: listTab
width: 200
property var rowSize: 70
property var expandSize: 500
property var text: ""

state: header.state

states: [
    State {
        name: "active"
        PropertyChanges {
            target: listTab
            height: expandSize
        }
    },

    State {
        name: "inactive"
        PropertyChanges {
            target: listTab
            height: listTab.rowSize
        }
    }
]

transitions: [
    Transition {
        from: "inactive"
        to: "active"
        reversible: true
        ParallelAnimation{
            PropertyAnimation{
                target: listTab
                properties: "height"
                duration: 50
            }
        }
    }
]

TabButton {
    id: header
    width: parent.width
    height: rowSize
    text: listTab.text
    /*MouseArea{
        anchors.fill: parent
        onClicked: if(listTab.state == "active"){
                       listTab.state = "inactive"
                   } else {
                       listTab.state = "active"
                   }
    }*/
}
ListView{
    anchors.top: header.bottom
    anchors.bottom: parent.bottom
    width: parent.width

    delegate: TabListItem{
        height: listTab.rowSize
    }
    clip: true;
    model: 20;
}

}
@
TabButton.qml:

@import QtQuick 2.0

Rectangle {
id: tabButton
width: 100
height: 62
property var text: ""

//state: "inactive"

MouseArea{
    anchors.fill: parent
    Image {
        id: background
        anchors.fill: parent
    }

    onClicked: if(tabButton.state == "active"){
                   tabButton.state = "inactive"
               } else {
                   tabButton.state = "active"
               }
}

Text {
    id: "text"
    text: tabButton.text
    color: "white"
    anchors.centerIn: parent
}

states: [
    State {
        name: "active"
        PropertyChanges {
            target: background
            source: "resources/tab_active.png"
        }
    },
    State {
        name: "inactive"
        PropertyChanges {
            target: background
            source: "resources/tab_inactive.png"
        }
    }
]

}
@