QML naming confussion - reference

Question

I have a basic question about naming components in QML files. I have read that the top element should always get the id root and parent is always the reference to the next element above it.
I have a two qml files, one with a ListView and one with the listview delegate
Userlogon.qml
Item {
id: root
height: parent.height
width: parent.width
property var password: ['0', '1', '2', '3']
property int selectedField : mill.selectedIndex
property int selectedUser : 0
property string p_background: configuration.getColor(Colors.ContentBackground)
ColumnLayout { anchors.fill: parent
Rectangle { id: userlist; Layout.fillWidth: true; Layout.fillHeight: true; Layout.preferredHeight: 300; color: p_background
ColumnLayout { anchors.fill: parent
ListView { Layout.fillWidth: true; Layout.fillHeight: true
model: user.model
currentIndex: 1
onCurrentIndexChanged: { console.log("currentIndex changed") }
header: UserItemDelegate { p_index: -1; p_name: "Benutzeranmeldung"; p_icon: "password"; p_isHeader: true }
delegate: UserItemDelegate { p_index: index; p_name: name; p_icon: icon; p_isHeader: false }
spacing: 20
}
}
}
UserItemDelegate.qml
Item {
id: root
height: configuration.getSize(Sizes.ListItemHeight)
width: parent.width
property int p_index
property string p_name
property string p_icon
property bool p_isHeader
property bool p_isSelected: root.ListView.view.currentIndex == p_index
property string p_color: configuration.getColor(p_isHeader ? Colors.ListItemDisabled : (p_isSelected ? Colors.ListItemSelected : Colors.ListItemDefault))
Rectangle { anchors.fill: parent; Layout.fillWidth: true; Layout.fillHeight: true; color: p_color
RowLayout { anchors.verticalCenter: parent.verticalCenter;
Image { Layout.leftMargin: 10; sourceSize.height: root.height * 0.6; source: "image://iconprovider/" + p_icon }
Label { Layout.leftMargin: 10; text: p_name }
}
MouseArea{ enabled: !p_isHeader; anchors.fill: parent; onClicked: { root.ListView.view.currentIndex = p_index; } }
}
}
With root.Listview.view.currentIndex I can access the listview in the parent UserLogon.qml although root is the id of the current item?
And is it possible to access e.g. a timer defined in UserLogon.qml from the delegate. If so how would the referencing be?

Answer 1

First of all, you don't need to name every root object "root". I don't know where you read that, but you can use whatever name makes sense to you.
When you call root.ListView.view.currentIndex, the root in that case is the id of the delegate, not the list. QML's scoping rules guarantee that. The ListView.view attached property then allows you to reference back to the list without needing its id.
Your timer question is unclear. In general, yes you can have access to the ListView's properties from the delegate, but you should usually do it the other way around. The ListView should reference the delegate's properties. The reason is that you may have a need to use that delegate somewhere else and you don't necessarily want it tightly coupled with the ListView in that case. Here's an example:
MyList.qml
ListView {
id: contactList
Timer {
id: backgroundTimer
interval: 3000
running: true
}
model: 5
delegate: MyDelegate {
width: contactList.width
// ListView binds the delegate's 'timedOut' property to something
timedOut: backgroundTimer.running
}
}
MyDelegate.qml
Rectangle {
id: contact
property bool timedOut: false
height: 30
radius: height / 2
color: timedOut ? "red" : "blue"
}