Qt 如何获取QML列布局子项的列表？ 我正在研究一些QML+C++项目，我对QML布局有一点问题： 我有两个自定义组件： 第一个：是一个侧栏“SideTabBar.qml”（下图中的紫色矩形） 第二个：是侧栏“SideBarElement.qml”中的元素

这张图片描述了我正在谈论的内容：

我想要的是：单击时高亮显示每个侧栏元素

为此，我尝试迭代columnLayout子项，并将其减亮（单击的子项除外）。但是，我还没有设法使它起作用

侧栏。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")
      //            }
     }
   }
}

---

在这种情况下，最好使用中继器，因为它具有关联的索引，并使用模型来设置属性：

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

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

侧栏.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
    }
}

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

---

谢谢您的回复，我会尽快尝试。