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