Using QRect in QML

[luca.cossaro]

Hi all,

I can't get how to use a QRect in QML.

I have a function (in C++) which returns a QVariantList made of QRect. I can pass this list to QML component and I see that the list contains the correct number of items and every item is a QVariant(QRect). Now the problem (maybe very stupid):

how can I access the values of the qrects? i mean x, y, height, width, etc...

I've tried this, but failed:
list[i].x // undefined
list[i].x() // [undefined] is not a function

I know it has to be a very simple thing, but I can't figure out.. so please help!

[koahnig]

You have to use "toRect()":http://developer.qt.nokia.com/doc/qt-4.8/qvariant.html#toRect in order to accessthe QVariant.
So probably
@
QRect rect = list[i].toRect().x();
@
should work (beware not tested)

[luca.cossaro]

Hi koahnig,

thanks for your answer.

I've tried what you suggested, but the result is the same:

@
var rects = main.rects;
for (i=0; i<rects.length; i++) {
console.log(i);
console.log(rects[i]);
console.log(rects[i].toRect().x); // TypeError: Result of expression 'rects[i].toRect' [undefined] is not a function.
}
@

[koahnig]

x is a method. So you have to use parenthesis.

Try this:
@
var rects = main.rects;
for (i=0; i<rects.length; i++) {
console.log(i);
// console.log(rects[i]);
console.log ( rects[i].toRect().x() );
}
@

[luca.cossaro]

I've tried, but the result is the same: TypeError: Result of expression 'rects[i].toRect' [undefined] is not a function.
0

[koahnig]

I think I misinterpret. You are trying to access in qml.
Sorry, I have no experience there.

[luca.cossaro]

Ok, thank you anyway.

[ixSci]

Hi luca.cossaro, you have to create a wrapper to use QRect object in QML since QRect is a plain C++ class with no methods provided to QML as well as without any properties. So you should create some class which will store QRect object and provide access to its date through properties/Q_INVOKABLE methods/slots.
I didn't try it but maybe QGraphicsRectItem will be of help to you since QML 1.x is based on graphic scene.

[luca.cossaro]

This is the answer!

thank you ixSci.

[njeisecke]

Things like this drive me crazy when working with Qml.

The whole QML "type system" is kind of inconsequential.

For example according to what http://developer.qt.nokia.com/doc/qt-4.8/qdeclarativeintroduction.html#basic-property-types says, that the basic types should be available for property declaration too. They are not. But hey, there's a note on the doc page: http://developer.qt.nokia.com/doc/qt-4.8/qdeclarativebasictypes.html (unfortunately the link inside the note does not work).

What I usually do is exposing all my C++ data to Qml using QAbstractItemModels. This also gives you much better control about model item lifetime.

Interestingly this also works for QRect returned from the QAbstractItemModel::data method as a QVariant so you can access the rectangle properties from inside the delegate quite naturally (and as expected):

Qml
@
ListView {
/* ... /
model: MyRectModel {}
delegate: Rectangle {
x: model.rect.x
y: model.rect.y
/ ... */
}
}
@

C++
@
QVariant MyRectModel::data(const QModelIndex &index, int role) const
{
const MyRectModelItem &item = m_items.at(index.row());

switch (role) {
/* ... /
case RectRole: return item.rectangle() / returns a QRect /
/ ... */
default: return QVariant();
}
}
@

[tanius]

Just a quick update about the current situation, for anyone who might end up here in 2020 and beyond: as of Qt 5.12 (and probably much earlier), the C++ types QRect and QRectF are accessible from QML as QML Basic Type rect.

This is not documented explicitly everywhere in the Qt documentation, but I tested it, and it works.

For example, Qt.inputMethod.keyboardRectangle is a QRectF on the C++ side (see). And the following code shows it has the x, y, width and height properties of a QML rect. It will executes under Android when showing or hiding the on-screen keyboard.

Connections {
    target: Qt.inputMethod
    onKeyboardRectangleChanged: {
        if (Qt.inputMethod.keyboardRectangle.height === 0) {
            autocomplete.focus = false
        }
    }
}