如何在C++代码中遍历QML Item并修改它的属性

我们在前面的文章＂如何遍历QML Item下的所有的children并显示它们的属性＂中，已经介绍了如何在QML中寻找自己的children．在今天的例程中，我们将介绍如何在Qt C++代码中遍历一个QML的所有Item，并修改它的属性．

我们的QML程序非常简单，就是源自SDK自带的模版：

Main.qml

import QtQuick 2.0
import Ubuntu.Components 1.1

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

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

    // Note! applicationName needs to match the "name" field of the click manifest
    applicationName: "qmlobject1.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
        title: i18n.tr("qmlobject1")

        Column {
            objectName: "column"
            spacing: units.gu(5)
            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!")
                }
            }
        }
    }
}

为了能够实现遍历的工作，我们首先需要把我们的QML中的Item表上自己的objectName．比如上面的"column"，"label"及"button"．这些objectName并不要求是唯一的．比如对于ListView中的delegate来说，如果delegate定义了自己的objectName，那么所有的delegate的实例就都有同样的objectName．

我们的C++代码非常简单：

main.cpp

#include <QGuiApplication>
#include <QQmlApplicationEngine>
#include <QQuickView>
#include <QQuickItem>
#include <QQmlProperty>

int main(int argc, char *argv[])
{
    QGuiApplication app(argc, argv);

    QQuickView view;
    view.setSource(QUrl(QStringLiteral("qrc:///Main.qml")));
    view.setResizeMode(QQuickView::SizeRootObjectToView);

    QQuickItem* root = view.rootObject();
    QObject *object = root->findChild<QObject*>("label");

    if (object) {
        object->setProperty("color", "red");
    }

    qDebug() << "Text Property value:" << QQmlProperty::read(object, "text").toString();
    QQmlProperty::write(object, "text", "Good morning");

    qDebug() << "Property value:" << object->property("fontSize").toString();
    object->setProperty("fontSize", "large");

    view.show();
    return app.exec();
}

这里我们先通过rootObject得到一个root的QQuickItem．通过它我们可以调用QObject::findChild()来寻找它下面所有的child．对于我们刚才讲的ListView来说，我们可以通过QObject::findChildren()来得到它所有的children．这里我们就不展示了．

在下面的代码中：

    if (object) {
        object->setProperty("color", "red");
    }

    qDebug() << "Text Property value:" << QQmlProperty::read(object, "text").toString();
    QQmlProperty::write(object, "text", "Good morning");

    qDebug() << "Property value:" << object->property("fontSize").toString();
    object->setProperty("fontSize", "large");

我们通过两种不同的方法来设置和读取我们在上面定义objectName为"text"的Label的属性．把它默认的颜色设为红色，并把它的字体的大小设为大．

运行我们的代码：

 

我们在SDK中的输出为：

Text Property value: "Hello.."
Property value: "medium"

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