how to bind to `MouseArea`'s `onDragChanged`? - qt

Qt Creator suggests that the onDragChanged slot exists in MouseArea.
MouseArea {
id: mouseArea
...
onDragChanged: console.log('Drag changed')
}
But at runtime it fails with:
Cannot assign to non-existent property "onDragChanged"

The proper way would be:
drag.onActiveChanged: console.log("Drag active:", drag.active)
This is because drag is a group of properties (under the hood it's a QObject or alike), so you need to reference that group first.
Your initial attempt doesn't work because drag is declared as CONSTANT Q_PROPERTY, which doesn't have a on...Changed signal

Silly workaround (but it works...)
readonly property bool _dragActive: drag.active
on_DragActiveChanged: {
... = drag.active
}

Related

QML object and nest object onCompleted order

I have a QML file which contains an Item, the Item contains a object:
QtObject {
id: something
Component.onCompleted: {
console.log("A");
}
}
At the file Item I also have:
Component.onCompleted: {
console.log("B");
}
What I see in the Application Output is
B
A
What I want is for A to be processed first, is there anyway to do this or do I have to change use a function in the child object and call it from the onCompleted of the parent?
Well, AFAIK you can't change the "completed" order. But you could control when the QtObject loads. For example:
Item {
property QtObject something: null
property Component objectComponent: QtObject {
objectName: "something"
Component.onCompleted: console.log("A");
}
Component.onCompleted: {
something = objectComponent.createObject(this);
console.log("B", something);
}
}
qml: A
qml: B QObject(0x351d750, "something")
There's also the Loader type, which basically does the createObject() for you, though it's meant more for loading visual components on-demand.
Also the "something" QtObject could be in an external file, of course.
ADDED: Apparently this also works and loads in the desired order, though I'm not sure I'd prefer it myself (but it's more "declarative" I suppose :).
Item {
property QtObject something: objectComponent.createObject(this);
property Component objectComponent: QtObject {
objectName: "something"
Component.onCompleted: console.log("A");
}
Component.onCompleted: console.log("B", something);
}
As you can read from the official documentation (https://doc.qt.io/qt-5/qml-qtqml-component.html#completed-signal), "the order of running the onCompleted handlers is undefined". So you can not trust in your console output for know the object creation order.
If you want load components in a specific order, you can use the Loader item.

Repater: Using C++ property as model

I have a C++ property
Q_PROPERTY(QList<qreal> XTickPos MEMBER _xTickPos);
which I want to use in a Repeater. In the same QML file, the c++ class has been given the id
id: pw
The repeater looks like this
Item {
anchors.fill: parent
visible: true
Repeater {
model: pw.XTickPos.length
Rectangle{
height: 50
width: 2
x: pw.XTickPos[index]
y:10
visible: true
color: "black"
border.width: 2
}
}
}
However, nothing is drawn on the screen. If instead I make property in the QML file:
var xTickPos = []
and set it via a Q_Invokable function in c++
Q_INVOKABLE QList<qreal> getXTickPositions();
and in QML
root.xTickPos=pw.getXTickPositions();
and use the QML property xTickPos as model in the above repeater it is working. I checked that pw.XTickPos is correctly filled via a console.log
What am I missing here?
This one is kinda tricky.
The documentation states that you can use a JS array as a model, and it does state that QList<qreal> is automatically converted to a JS array when returned to QML.
But it seems that you can't use a QList<qreal> that is automatically converted to a JS array as a model. Go figure...
Naturally, it is preferable to have a proper model with its proper notifications for top efficiency. But in case you really want to go for the list property, it appears you will have to do the conversion manually in a getter:
QVariantList model() {
QVariantList vl;
for (auto const & v : yourList) vl.append(v);
return vl;
}
Amazingly, although Qt supposedly makes that conversion automatically, it doesn't seem to be able to make a QVariantList from a QList<qreal>.
That's Qt for you...

How to display correctly Treeview with QML Qt 5.5

I'm trying to create a correct Treeview with Qml Qt 5.5.
I succeed to have a Treeview with a global root.
But impossible to find how to add child for row item.
For the moment I got something like that :
TreeView {
id:listTree
anchors.fill: parent
anchors.leftMargin: 1
headerVisible: false
backgroundVisible: false
selection: ItemSelectionModel {
model: myModel
}
TableViewColumn {
role: "name"
}
itemDelegate: Item {
Text {
anchors.verticalCenter: parent.verticalCenter
color: styleData.textColor
elide: styleData.elideMode
text: styleData.value
}
}
Component.onCompleted: {
model.append({"name":"Never"})
model.append({"name":"gonna"})
model.append({"name":"give"})
model.append({"name":"you"})
model.append({"name":"up"})
model.append({"name":"Never"})
model.append({"name":"gonna"})
model.append({"name":"let"})
model.append({"name":"you"})
model.append({"name":"dow"})
}
}
And I would like something like that :
How can I do it ?
You can also create a TreeModel class that extends QStandardItemModel and overrides roleNames(), like done here. To add children to nodes in your tree, just use appendRow().
TreeModel::TreeModel(QObject *parent) : QStandardItemModel(parent)
{
QStandardItem *root = new QStandardItem("root");
QStandardItem *child = new QStandardItem("child");
this->appendRow(root);
root->appendRow(child);
}
Your model doesn't have any parent child relationships which is why its displayed like a list.
You'll want your "TreeModel" to be a collection of TreeItems. Each TreeItem will have knowledge of their own children and their parent item.
You can follow a fully implemented Qt example found here http://doc.qt.io/qt-5/qtwidgets-itemviews-simpletreemodel-example.html. You'll want to (in C++) make a class for TreeItem, and a separate class for your TreeModel.
That example is working code, you can just copy and paste it and get a working model for your TreeView.
The part you'll be particularly interested in is the implementation of the method setupModelData(). That's where you'll want to parse through your wonderful dataset of 80's lyrics and assign each of them a TreeItem.
Each TreeItem (one for every row of data) should be given knowledge of its parent upon creation (in its constructor). Then as soon as its children are created, call parentTreeItem.appendChild(childTreeItem)
When your model is completed, you can assign it to your qml view in a few ways, registering it with qmlRegisterType is what I prefer (http://doc.qt.io/qt-5/qqmlengine.html#qmlRegisterType)
Once registered, it can be created in qml as though it were a ListView or any other qml object.
NOTE: You'll have this rootItem. This is something that isn't usable by the view, but all your "first indentation" parents are children of the rootItem.
Good luck!
Can you provide a code snippet of what line is causing your about failing to make a shortcut for QAbstractItemModel?

Why Qt QML doesn't properly bind properties?

It's very weird because I use almost the same pattern in another QML file and it works correctly! I'm sure I'm not reassigning value anywhere (the only thing I know that can make property static)!
I have something like this (it's a simplified example and probably works as expected):
Item {
property bool isExpanded: false
MouseArea {
anchors.fill: parent
onClicked: {
isExpanded = !isExpanded
console.log(isExpanded)
console.log(myId.visible)
}
}
MyCustomItem {
id: myId
visible: isExpanded
// other stuff
}
}
IsExpanded changes after I click but Item visibility always stays the same! And I have many other properties for my item (for example height: isExpanded ? someval : 0) which doesn't change too! It sort of works if I always change everything manually but whats the point then? And in another QML I use a similar pattern and there it works!
BUT! If I put, for example onDoubleClicked/another button press:
myId.visible = Qt.binding(function() {return isExpanded})
it works as it should! So, for some unknown reason it doesn't 'bind' them when it should in regular property declaration (visible: isExpanded).
So the question is, do I really need to explicitly tell Qt to bind property to make it work?
Edit: To make clear: I'm certain I don't reassign visible property anywhere. I doble checked it. And though qml size is only about 100 of lines I used ctrl+f to find any mention of visible and found none except already mentioned.
If there is more reliable way to tell what's from/ check for possible reassignments somewhere or something, please tell.
So the question is, do I really need to explicitly tell Qt to bind property to make it work?
Yes.
When declaring a property, you can use the binding syntax e.g. visible: isExpanded. But setting a property in imperative code using normal JavaScript syntax (i.e. the assignment operator) will break any existing binding and overwrite the property's value. If you want to explicitly set a property binding in imperative code, use the Qt.binding() method (docs).
Although your actual problem is due to falling victim to QML's scoping rules. Your MyCustomItem type has an isExpanded property, so when you declare:
MyCustomItem {
id: myId
visible: isExpanded
// other stuff
}
You're actually binding visible to MyCustomItem::isExpanded. So to fix just be explicit as to which isExpanded you are referring to:
Item {
id: base
property bool isExpanded: false
MouseArea {
anchors.fill: parent
onClicked: {
isExpanded = !isExpanded
console.log(isExpanded)
console.log(myId.visible)
}
}
MyCustomItem {
id: myId
visible: base.isExpanded
// other stuff
}
}
I found the issue! Very unobvious (haven't found documented anywhere) and it fails silently.
The problem is that MyCustomItem contained a property with the same name of outer booleal property isExpanded so in this code:
MyCustomItem {
id: myId
visible: isExpanded
// other stuff
}
isExpanded is from MyCustomItem. But without any indication of that. Well, now I know that this could happen and would probably spot it if it happens again but this is really counter-intuitive. What if it wasn't my item but someone else's and I didn't know that it had such property? Qt creator could've at least warned about possible ambiguities.

How to access the public properties of a qml page loaded through a Loader?

AA.qml
Item
{
id: drawLinesOnC
property string lineColour
property int lineDrawingSourceType
property variant startEndPointArray
}
main.qml
Loader
{
id: drawLineLoaderA
source: "AA.qml"
}
-
How to access the public properties of AA.qml page loaded through Loader drawLineLoaderA?
Solution is as follows:
drawLineLoaderA.source = "DrawLineLoader.qml"
if (drawLineLoaderA.status == Loader.Ready)
{
if (drawLineLoaderA.item && drawLineLoaderA.item.lineColour)
{
drawLineLoaderA.item.lineColour = "black"
drawLineLoaderA.item.lineDrawingSourceType = 2
}
}
In addition to what #TheIndependentAquarius said, you can declare property of the corresponding type in your loader:
Loader {
id: drawLineLoaderA
readonly property AA aa: item
source: "AA.qml"
}
And then use it like this:
if (drawLineLoaderA.aa) {
drawLineLoaderA.aa.color = "black"
}
Now you clearly stated that you deal with item of type AA and no other, and you'll get autocompletion on loaded item's properties as a bonus.
Note 1: Configuration of loaded item's properties should be done either in AA.qml itself (default values) or in Loader's onLoaded handler, as #troyane suggested.
Note 2: In your AA.qml you declared property string lineColour. You might be interested in color QML type. If you declare property color lineColour, QML will check that you assign valid values to this property. Moreover, color value is automatically converted to QColor when passed to C++ (and from QColor when passed from C++, of course).

Resources