如何获取QML列布局子项列表？

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

None

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