ListView example

qcoderpro

This program runs well:

import QtQuick

Window {
    width: 640
    height: 480
    visible: true
    title: qsTr("Hello World")

    Rectangle {
        id: root
        anchors.centerIn: parent
        width: 200; height: 150

        ListModel {
            id: listMd
            ListElement { name: "Bill Smith" }
            ListElement { name: "John Brown" }
            ListElement { name: "Sam Wise"   }
            ListElement { name: "John Brown" }
            ListElement { name: "Bill Smith" }
            ListElement { name: "John Brown" }
            ListElement { name: "Bill Smith" }
            ListElement { name: "John Brown" }
            ListElement { name: "Sam Wise"   }
            ListElement { name: "John Brown" }
            ListElement { name: "Bill Smith" }
            ListElement { name: "John Brown" }
        }

        Component {
            id: contactDelegate
            Rectangle {
                width: root.width
                implicitHeight: txt.height
                color: lv.currentIndex == index ? "lightgreen" : "lightblue"

                MouseArea {
                    anchors.fill: parent
                    onClicked: lv.currentIndex = index
                }

                Text {
                    id: txt
                    text: qsTr(name)
                    font.pixelSize: 30
                }
            }
        }

        ListView {
            id: lv
            anchors.fill: parent
            model: listMd
            delegate: contactDelegate
            clip: true
            focus: true
        }
    }
}

What I want to is to have the list view without a default selected item (with the color of light green). That is, all elements are to be in "lightblue" except for the time we click one. Any idea?

My second question is about index in color: lv.currentIndex == index ? "lightgreen" : "lightblue" which I couldn't find its definition in the Docs!

lemons

@qcoderpro

simply set the currentIndex to -1

ListView {
    id: lv
    // ...
    currentIndex: -1
    // ...
}

currentIndex is the currently selected index of the ListView and index is the index of the current delegate.
So index just reflects the "loop index" for filling the ListView with your components
(first component has index=0, second component has index=1, etc.)

qcoderpro

@lemons
So currentIndex: -1 means no index is selected by default, right? (since indexes starts from 0 on the ListView by default)

GrecKo

Do you read the doc?
https://doc.qt.io/qt-6/qml-qtquick-listview.html#currentIndex-prop