I have a nested listview structure where the delegate listview will contain another listview. I would like the nested listview's delegate to refer to itself because the nested listview will contain the same type of item as itself, but this doesn't appear to work.
Component {
id: subSequenceComponent
ItemDelegate {
id: subSequenceItemDelegate
property var id: edit.id
ColumnLayout {
Text{
text: edit.name
}
ListView {
width: 180; height: 200
model: items.subModelFromId(subSequenceItemDelegate.id)
delegate: subSequenceComponent
}
}
}
}
This works:
Component {
id: subSequenceComponent
ItemDelegate {
id: subSequenceItemDelegate
property var id: edit.id
ColumnLayout {
Text{
text: edit.name
}
ListView {
width: 180; height: 200
model: items.subModelFromId(subSequenceItemDelegate.id)
delegate: Text{
text: edit.name
}
}
}
}
}
Is there a way to reuse the same delegate you are a part of?
It may be connected to this bug. Basically, QML has some checks that are supposed to prevent accidental infinite recursions, but they are not particularly well implemented, and trigger false positives even for scenario where nesting is intended and there is no danger of infinite recursion.
If that is the case, then you can trick that check by using an additional Loader that will load the component from a string, which will not catch the nesting recursion.
Related
When using using Package, State and ParentChange to re-parent a delegate to one of several views, the delegate seems to momentarily have a null parent while bindings are re-evaluated. This causes errors if the delegate has bindings to parent.width or similar.
This is disturbing because Qt's published Package example displays the same problem if the initial state is changed to the other alternative
(To reproduce: copy ..../Qt/Examples/Qt-5.14.1/quick/views/package/{view.qml,Delegate.qml} and change the initial upTo value from 0 to 7 in view.qml and then run "qmlscene view.qml".).
Below is a simplification of Qt's example, with a constant state. The active State uses a ParentChange which defines width; this somehow causes the delegate to momentarily have a null parent, and the binding for width:parent.width gets an error:
test.qml line 26: TypeError: Cannot read property 'width' of null
What causes this, or rather, how to avoid it? And, how could the Package mechanism ever work given that Qt's example has the same problem as noted above?
import QtQuick 2.0
import QtQml.Models 2.1
Rectangle {
width: 300; height: 400
ListModel {
id: myModel
ListElement { display: "One" }
ListElement { display: "Two" }
ListElement { display: "Three" }
}
DelegateModel {
id: visualModel
model: myModel
delegate:
Package {
Rectangle { id: rectA;
width: 40; height: 25; Package.name: 'pkgA'
}
Rectangle { id: rectB;
width: 40; height: 25; Package.name: 'pkgB'
}
Rectangle {
id: wrapper
width: parent.width; // ERROR HERE: parent is sometimes null!
height: 25
color: 'lightsteelblue'
state: 'state1'
states: [
State {
name: 'state1'
ParentChange {
target: wrapper; parent: rectB
width: rectB.width; height: rectB.height // **CAUSES ERROR**
}
}
]
Component.onCompleted: {
console.log("wrapper onCompleted: parent is",parent);
}
onParentChanged: {
console.log("wrapper parent changed to",parent);
}
}
}
}
ListView {
width: 300; height: 200
model: visualModel.parts.pkgA
}
ListView {
width: 300; height: 200
model: visualModel.parts.pkgB
}
}
Ok, finally figured this out. You are starting with this:
width: parent.width
which is a Qt binding expression. It will update whenever parent or parent.width changes. And when the wrapper Rectangle first is created, parent starts rightly as null - it has no visual parent yet.
But then you do a ParentChange like this:
ParentChange {
target: wrapper; parent: rectB
width: rectB.width; height: rectB.height // **CAUSES ERROR**
}
The width assignment in the ParentChange is removing your previous binding and placing a new one of rectB.width width on it. This is why console logging on the original binding stops firing at this point. That binding has been removed.
So, bottom line, you are misinterpreting what is happening. Parent is null to start with and gets set via the state initial value before Component.onCompleted fires. Then when you do the ParentChange, you are wiping out the original binding so the debugging you went through was misleading.
So back to your original question, to stop the error, just remove the width and height bindings altogether from wrapper and let the ParentChange apply the ones there which won't throw errors.
i want to add a Component dynamically to an ColumnLayout in a TabView/Tab. But i've not found a possibility to do this. The problem is that i have no correct parent reference to my ColumnLayout for the createObject call.
Because the Tab dynamically loads a Component I've encapsulated the ColumnLayout in a Component.
In the QML Debugger i can solve the following path: objForm.tabView.tabStatus.tabStatusLoader.colLayout, but i cant use this as an correct parent.
It seems not be in the scope.
TypeError: Cannot read property 'tabStatus' of undefined
ObjForm.ui.qml
Item {
id: item1
width: 400
height: 400
property QtObject object
property Component compLayout
TabView {
id: tabView
anchors.fill: parent
Tab {
id: tabStatus
title: "status"
Loader {
id: tabStatusLoader
sourceComponent: compLayout
}
}
}
}
ObjForm.qml
ObjectViewForm {
id: objForm
anchors.fill: parent
object: someObj
compLayout: Component {
id: layoutComp
ColumnLayout {
id: colLayout
spacing: 2
}
}
onObjectChanged: {
// Here i want to add the someLabel Component to the ColumnLayout
someLabel.createObject(*PARENT*)
}
Component {
id: someLabel
Row {
property string text
property string label
spacing: 5
Label {
text: parent.label
}
Label {
text: parent.text
}
}
}
Does anyone know how to solve this or can make a better suggestion?
ok I've found a solution by myself. Instead to include the ColumnLayout into the Component, i've pulled it out and made an alias property to publish it. With this it was possible to add objects to my ColumnLayout. But the ColumnLayout got the wrong parent(objForm) instead of the Component.
A Component cant be a parent because a QQuickItem* is expected instead of a QObject* and additional can't include properties except for 'id'. Therefore a dummy Item was needed.
To reparent the ColumnLayout the Item needs a Component.onCompleted function where the parent will be set.
ObjectViewForm {
id: objForm
anchors.fill: parent
object: someObj
property alias componentLayout: colLayout
compLayout: Component {
id: layoutComp
Item {
id: dummy
Component.onCompleted: {
colLayout.parent = dummy
}
}
}
ColumnLayout {
id: colLayout
spacing: 2
}
I have a screen with some rectangles which can contain text. The text content of these rectangles should be allowed to change through clicking on buttons in the screen where this component is used. The problem I am having is how to know in the screen which uses this component which instance is selected. I thought about solving this via emitting a signal, which transmits the id of the instance as reference, but it seems this does not work. How could this be accomplished? Here my custom rectangle component
Rectangle {
id: root
width: 50
height: 50
color: "#000000"
anchors.verticalCenter: parent.verticalCenter
border.color: "#555555"
property int value: 0
signal sendId(Item)
Text {
id: displayed_text
color: "#ffffff"
text: root.value
anchors.horizontalCenter: parent.horizontalCenter
anchors.verticalCenter: parent.verticalCenter
horizontalAlignment: Text.AlignHCenter
verticalAlignment: Text.AlignVCenter
font.pixelSize: 15
}
MouseArea {
id: mouseArea
anchors.fill: parent
onClicked: {
root.border.color="#222222"
root.sendId(root.id)
}
}
}
and here the file where other buttons should change the content of the custom component:
property Item selected: myRectangle
function changeSelected(value) {
selected.value=5
}
function setSelected(it) {
root.selected=it
}
MyRectangle {
id: myRectangle
Component.onCompleted: {
myRectangle.sendId.connect(tempNumber.setSelected)
}
}
MyRectangle {
id: myRectangle1
Component.onCompleted: {
myRectangle1.sendId.connect(tempNumber.setSelected)
}
}
MyRectangle {
id: myRectangle2
Component.onCompleted: {
myRectangle2.sendId.connect(tempNumber.setSelected)
}
}
root.sendId(root.id)
The id is not a regular property. Don't use it as such. The purpose of the id is to get you a reference, with which you can refer to a particular object, so all you really need is:
root.sendId(root)
And if root is your qml file root object, sendId(root) would work too as long as sendId is not shadowed, root members can be referenced directly, keep in mind this only applies to the root object, it won't work for a object that is a direct or indirect parent but not root.
It is recomended practice to abstain from giving everything an id - only use ids when you really need to reference a particular object and no other way exists.
Another thing you are missing is that unlike JS functions, you do have to provide some typing for a signal. You can still use var and pass anything, but usually it is more efficient to narrow down the scope. So you need type and identifier:
signal sendId(Item item)
This way you can access item in the signal handlers, so you can avoid the awkward imperative connection syntax, so instead you can simply:
MyRectangle {
onSendId: tempNumber.setSelected(item)
}
However, I'd say your design is not optional. Signals are supposed to be employed when you aim for generality and reuse. Your usage scenario is more specific, thus the usage of signals can be avoided altogether:
// Rect.qml
Rectangle {
width: 50
height: 50
color: manager.selected === this ? "red" : "blue"
MouseArea {
anchors.fill: parent
onClicked: manager.selected = parent
}
}
// main.qml
Window {
id: manager
visible: true
width: 600
height: 300
property Item selected: null
Row {
spacing: 2
Repeater {
model: 10
delegate: Rect {}
}
}
}
As the following example shows, you can directly access objects by id as long as they can be found down the object tree. The same applies to properties, however while the id will work for any object down the tree, properties will only work if they are declared in the root object of the particular qml file.
Inside the delegate, I bind Image's source property to ListView's currentIndex which determines which image to load. This works great:
ListView {
id: answerListView
model: 5
currentIndex: -1
delegate: answerDelegate
}
Component {
id: answerDelegate
Item {
width: 100
height: 100
Image {
source: answerListView.currentIndex === index
? "selected.png" : "not_selected.png"
}
MouseArea {
anchors.fill: parent
onClicked: {
answerListView.currentIndex = index
}
}
Component.onCompleted: {
answerListView.currentIndex = 1; // doesn't work!!
}
}
}
Since currentIndex: -1, it will always show not_selected.png. To show selected.png, I change currentIndex in Component.onLoaded inside delegate.
I was expecting image to load selected.png since currentIndex was updated.
What is the correct way and what am I misunderstanding here?
Ok, new guess:
You want to have the posibility to select multiple Items. As currentIndex only stores one value, which is the value you assigned it last, you can use it to mark only one Item.
Therefore you need to find another way to store your selection. You might for example have a property in the delegate: property bool selected: false which you set to true upon selection.
The problem with this solution is, that it only works if all Items are instantiated at all times. As soon as one Item will be destroyed again, the information will be lost, and uppon the next creation, the selection/unselection is undone.
The better way would be to introduce a role in your model, that stores the selection outside of the non-persistant delegates for you:
ListView {
id: answerListView
model: lm
delegate: answerDelegate
width: 100
height: 220
}
ListModel {
id: lm
ListElement { selected: false }
ListElement { selected: false }
ListElement { selected: false }
ListElement { selected: false }
ListElement { selected: false }
}
Component {
id: answerDelegate
Item {
width: 100
height: 100
Image {
anchors.fill: parent
source: model.selected ? "selected.png" : "notselected.png"
}
Text {
text: (model.selected ? 'selected ' : 'notselected ')
}
Component.onCompleted: {
model.selected = true // doesn't work!!
}
MouseArea {
anchors.fill: parent
onClicked: {
model.selected = !model.selected
}
}
}
}
Another option would probably be a ItemSelectionModel, but I don't know atm, how it works.
Otherwise your example works as expected:
The Item with index 1 is shown, and displays the Image selected.png. All other Items are not shown (for the ListView is to small) but if the would be shown, they would show notselected.png for the answerListView.currentIndex is not equal to their index.
Is it possible to create QML Items out of a DelegateModel?
Here is a example DelegateModel:
DelegateModel
{
id: delegateModel
model: ListModel
{
ListElement { name: "#FAFAFA"; test: "object1" }
ListElement { name: "#000000"; test: "object2" }
}
delegate: Rectangle
{
objectName: test
width: 50
height: 50
color: name
}
Component.onCompleted:
{
Utils.var_dump(items,3)
items.create(0)
Utils.var_dump(items.get(0),3)
}
}
The Result should look like this:
Rectangle
{
objectName: "object1"
width: 50
height: 50
color: "#FAFAFA"
}
Rectangle
{
objectName: "object2"
width: 50
height: 50
color: "#000000"
}
For every ListElement there is a created delegate with the inserted ListElement data.
You can do that with anything that is usable to instantiate a Model (a View)
For example you could use it as a model for a ListView, a GridView or a Repeater. As the model provides the delegate on its own, you do not need to specify any delegate in the View, that instantiates it.
Column {
Repeater {
model: delegateModel
// delegate: ... <--- Nothing here! Uses the delegate from the Model.
}
}
If you use the create(index)-Method, the delegate will be created, but has no parent, so it is not displayed. So you need to set the parent, to have it shown:
Button {
onClicked: {
for (var a = 0; a < dm.items.count; a++) {
var o = dm.items.create(a)
o.parent = r
}
}
}
You need to be aware, that the DelegateModel (without Package and Parts) can't be used in multiple views, as each entry/delegate can be instantiated only once at the same time. If you want to have that,
consider using a QSortFilterProxyModel to filter the stuff, and use as much Views that provide their own delegates, as you want.