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

来源：互联网发布：到期收益率知乎编辑：程序博客网时间：2024/06/05 04:30

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

我们的例程非常简单：

Main.qml

import QtQuick 2.0import 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: 4qml: list[ 0 ] objectName = qml: list[ 0 ] width = 0qml: list[ 0 ] height = 0qml: list[ 0 ] height = QQuickItem_QML_22(0x1168420)qml: list[ 1 ] objectName = qml: list[ 1 ] width = 480qml: list[ 1 ] height = 680qml: list[ 1 ] height = UCStyledItemBase_QML_34(0x11842b0)qml: list[ 2 ] objectName = qml: list[ 2 ] width = 480qml: list[ 2 ] height = 680qml: list[ 2 ] height = PerformanceOverlay_QMLTYPE_31(0x1168a90)qml: list[ 3 ] objectName = qml: list[ 3 ] width = 480qml: list[ 3 ] height = 680qml: 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: 3qml: list[ 0 ] objectName = qml: list[ 0 ] width = 0qml: list[ 0 ] height = 0qml: list[ 0 ] height = QQuickItem_QML_18(0x2b35c70)qml: list[ 1 ] objectName = qml: list[ 1 ] width = 0qml: list[ 1 ] height = 0qml: list[ 1 ] height = QQuickLoader(0x2b371d0)qml: list[ 2 ] objectName = columnqml: list[ 2 ] width = 448qml: list[ 2 ] height = 576qml: list[ 2 ] height = QQuickColumn(0x2b32ca0, "column")

如果我们换成为layout:

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

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

0 0