How to get the list of QML Column Layout children?

Question

I am working on some QML + c++ project and, I have a little problem with QML layouts: I have two custom components :

1. First one: is a side-bar "SideTabBar.qml" (the purple rectangle in the image below).
2. Second one: is the element in the side-bar "SideBarElement.qml".

This image describes what I am talking about:

What I want is: highlight each side bar element on click.

To do so I am trying to iterate over the columnLayout children and lowlight them excepting the clicked one. But, I have not managed to make it works.

SideTabBar.qml:

Item {
  id: sideTabBar
  width: 70
  height: parent.height
  property string activeElement: ""
  ColumnLayout{
    id:sidebarLayout
    anchors.fill: parent
    spacing:2

    SideBarElement{elementId:"a1";image:"../assets/product.svg"}
    SideBarElement{elementId:"a2";image:"../assets/product.svg"}

    Item {Layout.fillHeight: true}
  }
}

SideBarElement.qml:

Item {
    property alias image: sideBarElementicon.source
    property string elementId: ""
    id: sideBarElement
    width:parent.width
    Layout.preferredHeight: 70
    Layout.alignment: Qt.AlignTop

    Rectangle{
      anchors.fill: parent
      color:Qt.rgba(0,0,0,0)
    }
    Image {
      id: sideBarElementicon
      source: "genericIcon.png"
      anchors.horizontalCenter: parent.horizontalCenter
      anchors.verticalCenter: parent.verticalCenter
      width: 50
      height: 50
    }
    MouseArea{
      anchors.fill: parent
      onClicked:{ sideTabBar.activeElement = elementId
      // compiler does not even enter this loop.
      //            for(var child in Layout.children){
      //                console.log("this is a child")
      //            }
     }
   }
}

Answer 1

In this case it is better to work with a Repeater since it has an associated index and use a model to set the properties:

SideBarElement.qml

import QtQuick 2.0

Item {
    property alias icon: sideBarElementicon.source
    property bool highlight: false
    width: parent.width
    Rectangle{
        anchors.fill: parent
        color: highlight ? Qt.rgba(1,1,0,1) : Qt.rgba(0,0,0,0)
    }
    Image {
        id: sideBarElementicon
        source: "genericIcon.png"
        anchors.horizontalCenter: parent.horizontalCenter
        anchors.verticalCenter: parent.verticalCenter
        width: 50
        height: 50
    }
}

SideTabBar.qml

import QtQuick 2.0
import QtQuick.Layouts 1.11

Item {
    id: sideTabBar
    width: 70
    height: parent.height
    property int currentIndex: -1
    ListModel{
        id: elements
        ListElement {
            image: "../assets/product.svg"
        }
        ListElement {
            image: "../assets/product.svg"
        }
        ListElement {
            image: "../assets/product.svg"
        }
        ListElement {
            image: "../assets/product.svg"
        }
        ListElement {
            image: "../assets/product.svg"
        }
        ListElement {
            image: "../assets/product.svg"
        }
    }

    Rectangle{
        anchors.fill: parent
        color: "purple"
    }

    ColumnLayout{
        id:sidebarLayout
        anchors.fill: parent
        spacing:2
        Repeater{
            model: elements
            SideBarElement{
                id: element
                highlight: ix == currentIndex
                icon: image
                property int ix: index
                Layout.preferredHeight: 70
                Layout.alignment: Qt.AlignTop
                MouseArea{
                    anchors.fill: parent
                    onClicked: currentIndex = ix
                }
            }
        }
        Item {Layout.fillHeight: true}
    }
}