Как получить список детей QML Column Layout

Question

Я работаю над проектом QML + c ++, и у меня есть небольшая проблема с макетами QML: У меня есть два пользовательских компонента:

1. Первый: - это боковая панель "SideTabBar.qml" (фиолетовый прямоугольник на изображении ниже).
2. Второй: - это элемент в боковой панели "SideBarElement.qml".

Это изображение описывает то, о чем я говорю:

То, что я хочу: выделять каждый элемент боковой панели при нажатии.

Для этого я пытаюсь перебрать дочерние элементы columnLayout и выделить их, за исключением нажатой. Но мне не удалось заставить его работать.

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

В этом случае лучше работать с повторителем, так как он имеет связанный индекс и использовать модель для установки свойств:

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