Skip to content
  • Categories
  • Recent
  • Tags
  • Popular
  • Users
  • Groups
  • Search
  • Get Qt Extensions
  • Unsolved
Collapse
Brand Logo
  1. Home
  2. Qt Development
  3. QML and Qt Quick
  4. Array not accessible
Forum Updated to NodeBB v4.3 + New Features

Array not accessible

Scheduled Pinned Locked Moved QML and Qt Quick
4 Posts 2 Posters 1.4k Views 1 Watching
  • Oldest to Newest
  • Newest to Oldest
  • Most Votes
Reply
  • Reply as topic
Log in to reply
This topic has been deleted. Only users with topic management privileges can see it.
  • J Offline
    J Offline
    jozzan
    wrote on last edited by
    #1

    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

    1 Reply Last reply
    0
    • SGaistS Offline
      SGaistS Offline
      SGaist
      Lifetime Qt Champion
      wrote on last edited by
      #2

      Hi and welcome to devnet,

      @model: tabs.length@

      probably is the key to your problem

      Interested in AI ? www.idiap.ch
      Please read the Qt Code of Conduct - https://forum.qt.io/topic/113070/qt-code-of-conduct

      1 Reply Last reply
      0
      • J Offline
        J Offline
        jozzan
        wrote on last edited by
        #3

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

        1 Reply Last reply
        0
        • J Offline
          J Offline
          jozzan
          wrote on last edited by
          #4

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

          }
          @

          1 Reply Last reply
          0

          • Login

          • Login or register to search.
          • First post
            Last post
          0
          • Categories
          • Recent
          • Tags
          • Popular
          • Users
          • Groups
          • Search
          • Get Qt Extensions
          • Unsolved