Array not accessible



  • 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


  • Lifetime Qt Champion

    Hi and welcome to devnet,

    @model: tabs.length@

    probably is the key to your problem



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



  • 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"
            }
        }
    ]
    

    }
    @


Log in to reply
 

Looks like your connection to Qt Forum was lost, please wait while we try to reconnect.