QML naming confussion

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"
}