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
-
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.0Rectangle {
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.0Rectangle {
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" } } ]
}
@