Custom attached properties in QML
I am creating a custom QML component (specialization ListView
allowing multiple choice). I would like to provide attached properties to the objects provided to my component. I can see how to create attached properties using C ++ . However, I cannot find any information on adding custom properties in pure QML. Is this possible with QML?
source to share
QML has an alternative, simple and straightforward way - just use an adapter object that implements the properties you want. Then, instead of just attaching the socket to the adapter - use it as parent / container. You can also nest objects into an adapter by getting another C ++ property with exclusive groupings. A possible way to minimize the overhead is to use JS objects and properties with the downside - no change notifications that you can mitigate a bit by manually emitting.
Example:
// Adapter.qml - interface with attached properties
Item {
id: adapter
property int customInt : Math.random() * 1000
property var group : {"a" : Math.random(), "b" : Math.random() }
default property Component delegate
width: childrenRect.width
height: childrenRect.height
Component.onCompleted: delegate.createObject(adapter)
}
// usage
ListView {
width: 100
height: 300
model: 5
delegate: Adapter {
Row {
spacing: 10
Text { text: index }
Text { text: customInt }
Text { text: group.a }
Text { text: group.a }
}
}
}
It is quite painless and convenient compared to some of the other QML workarounds. You don't even need to do it parent.parent.customInt
- the properties are directly accessible, as if they were attached, this works because of dynamic scoping. default property
avoids setting an internal delegate as a property where you just nest the delegate you want directly into the adapter.
In many cases, these acrobatics are overflowing, you can just wrap them in place:
ListView {
width: 100
height: 300
model: 5
delegate: Item {
width: childrenRect.width
height: childrenRect.height
property string custom1: "another"
property string custom2: "set of"
property string custom3: "properties"
Row {
spacing: 10
Text { text: index }
Text { text: custom1 }
Text { text: custom2 }
Text { text: custom3 }
}
}
}
The only key part is the binding for the size of the adapter object so that the view can lay out the objects correctly. I usually use an element Wrap
that essentially does the same thing, but is implemented in C ++, which is much more efficient than QML binding.
source to share