如何遍历QML Item下的所有的children并显示它们的属性

在今天的这篇文章中，我们将用一个简单的应用来展示如何显示一个Item的所有的children并展示它们的一些主要的也一些属性．

我们的例程非常简单：

Main.qml

import QtQuick 2.0
import Ubuntu.Components 1.1

/*!
    \brief MainView with a Label and Button elements.
*/

MainView {
    id: root
    // objectName for functional testing purposes (autopilot-qt5)
    objectName: "mainView"

    // Note! applicationName needs to match the "name" field of the click manifest
    applicationName: "qmlobjects.liu-xiao-guo"

    /*
     This property enables the application to change orientation
     when the device is rotated. The default is false.
    */
    //automaticOrientation: true

    // Removes the old toolbar and enables new features of the new header.
    useDeprecatedToolbar: false

    width: units.gu(60)
    height: units.gu(85)

    Page {
        id: page
        objectName: "page"
        title: i18n.tr("qmlobjects")

        Column {
            id: layout
            objectName: "column"
            spacing: units.gu(1)
            anchors {
                margins: units.gu(2)
                fill: parent
            }

            Label {
                id: label
                objectName: "label"
                text: i18n.tr("Hello..")
            }

            Button {
                objectName: "button"
                width: parent.width

                text: i18n.tr("Tap me!")

                onClicked: {
                    label.text = i18n.tr("..world!")
                }
            }
        }                
    }

    Component.onCompleted: {
        console.log("MainView onCompleted!")
        var list = root.children;

        console.log("count: " + list.length);
        for ( var i in list) {
            console.log("list[ " +i + " ] objectName = " + list[i].objectName)
            console.log("list[ " +i + " ] width = " + list[i].width)
            console.log("list[ " +i + " ] height = " + list[i].height)
            console.log("list[ " +i + " ] height = " + list[i])
        }
    }
}

在这里，我们显示了root的一些最基本的属性：

ml: MainView onCompleted!
qml: count: 4
qml: list[ 0 ] objectName = 
qml: list[ 0 ] width = 0
qml: list[ 0 ] height = 0
qml: list[ 0 ] height = QQuickItem_QML_22(0x1168420)
qml: list[ 1 ] objectName = 
qml: list[ 1 ] width = 480
qml: list[ 1 ] height = 680
qml: list[ 1 ] height = UCStyledItemBase_QML_34(0x11842b0)
qml: list[ 2 ] objectName = 
qml: list[ 2 ] width = 480
qml: list[ 2 ] height = 680
qml: list[ 2 ] height = PerformanceOverlay_QMLTYPE_31(0x1168a90)
qml: list[ 3 ] objectName = 
qml: list[ 3 ] width = 480
qml: list[ 3 ] height = 680
qml: list[ 3 ] height = OrientationHelper_QMLTYPE_35_QML_43(0x1189ef0)

如果我们把代码中的root改为page的话，也即:

    Component.onCompleted: {
        console.log("MainView onCompleted!")
        var list = page.children;

        console.log("count: " + list.length);
        for ( var i in list) {
            console.log("list[ " +i + " ] objectName = " + list[i].objectName)
            console.log("list[ " +i + " ] width = " + list[i].width)
            console.log("list[ " +i + " ] height = " + list[i].height)
            console.log("list[ " +i + " ] height = " + list[i])
        }
    }

显示如下：

qml: MainView onCompleted!
qml: count: 3
qml: list[ 0 ] objectName = 
qml: list[ 0 ] width = 0
qml: list[ 0 ] height = 0
qml: list[ 0 ] height = QQuickItem_QML_18(0x2b35c70)
qml: list[ 1 ] objectName = 
qml: list[ 1 ] width = 0
qml: list[ 1 ] height = 0
qml: list[ 1 ] height = QQuickLoader(0x2b371d0)
qml: list[ 2 ] objectName = column
qml: list[ 2 ] width = 448
qml: list[ 2 ] height = 576
qml: list[ 2 ] height = QQuickColumn(0x2b32ca0, "column")

如果我们换成为layout:

qml: MainView onCompleted!
qml: count: 2
qml: list[ 0 ] objectName = label
qml: list[ 0 ] width = 42.3125
qml: list[ 0 ] height = 17
qml: list[ 0 ] height = Label_QMLTYPE_42(0x18c7c80, "label")
qml: list[ 1 ] objectName = button
qml: list[ 1 ] width = 448
qml: list[ 1 ] height = 32
qml: list[ 1 ] height = Button_QMLTYPE_46(0x18cbcc0, "button")

整个项目的源代码为： https://github.com/liu-xiao-guo/qmlobjects