Edit QML property from application like designer does

Question

My application provides possibility to edit some QML object property at run-time. Is it possible to show QML property for editing like Qt designer does ?

For example, I have QML file

import QtQuick 2.0

Rectangle {
id: circle
color: "red"
border.color: "black"
border.width: 1

/* allow to modificate by user */

opacity: 0.5
width: 16
height: 16
radius: width*0.5
}

after creation, I want to allow user in runtime to change some of its property. Is it possible to use Qt designer classes/plugins/anything to display its property and allow to edit them?

I don't want to reinvent the wheel. :)

Answer 1

You can get the QML item pointer in CPP with the following code

QQuickItem *item = engine.rootObjects().first()->findChild("objectNameHere");

Then, you can walk through its properties with the following code

for(int i=0;i<item->metaObject()->propertyCount();++i) {
    // Here you can get the name of the property like
    qDebug() << "Name" << item->metaObject()->property(i).name();
    // Here you can get the type name of the property like
    qDebug() << "Name" << item->metaObject()->property(i).typeName();
    // Here you can check if it's a double type for example, and get the value and, set the value to ZERO again for example
    if(item->metaObject()->property(i).type() == QVariant::DOUBLE) {
    // Get the value
    qDebug() << "Value" << item->property(item->metaObject()->property(i).name()).toDouble();
    // Set the value to ZERO
    item->setProperty(item->metaObject()->property(i).name(), 0.0);    
}

Within a few minutes, you can create a generic UI to let modify any object's properties with this approach, i guess