ListView - how to highlight current item

PawlosCK

How to highlight current item? I tried a lot of things and nothing work.

import QtQuick.Window 2.15
import QtQuick.Controls 1.4
import QtQuick.Layouts 1.15
import QtQuick 2.15
import QtQml 2.15
//import QtQuick 2.0

Window
{
    id: alarmListWindow

    width: 400
    height: 400

    ListModel
    {
        id: modelID

        ListElement
        {
            idAlarm: 0
            remainingTime: 0
            typeAlarm: ""
            messageAlarm: ""
        }
    }
    Component
    {
        id: delegatID
        Rectangle
        {
            id: alarmItemDelegate
            width: listviewID.width
            height: 45
            border.width: 1
            radius: 5

            Text
            {
                id: remainingAl
                x: 5
                y: 0
                text: "Remaining: " + model.remainingTime
            }
            Text
            {
                id: typeAl
                x: 5
                y: remainingAl.height
                text: "Type: " + model.typeAlarm
            }
            Text
            {
                id: messageAl
                x: 5
                y: remainingAl.height*2
                text: "message: " + model.messageAlarm
            }
        }
    }
    ListView
    {
        spacing: 5
        clip: true

        id: listviewID
//        anchors.fill: parent
        width: parent.width
        height: parent.height/2
        model: modelID
        delegate: delegatID

        focus: true
        MouseArea
        {
            anchors.fill: parent
            onClicked: console.log("Wybrany alarm: " + listviewID.currentIndex)
        }
    }

    Timer
    {
        id: timerUpdateListView
        interval: 1000; running: true; repeat: true; triggeredOnStart: true
        onTriggered: updateListView()
    }
    function updateListView()
    {

        if (list_of_alarms.length !== modelID.count)
        {
            modelID.clear()
            for (var alarm of list_of_alarms)
            {
                modelID.append( { "remainingTime": alarm.getRemainingTime(), "typeAlarm": alarm.getTypeAlarm(), "messageAlarm": alarm.getMessage()} )
            }
        }
        else
        {
            var index = 0
            for (var alarm of list_of_alarms)
            {
                modelID.setProperty(index, "remainingTime", alarm.getRemainingTime() )
//                modelID.setProperty(index, "typeAlarm", alarm.getTypeAlarm() )
//                modelID.setProperty(index, "messageAlarm", alarm.getMessage() )
                index++
            }
        }
    }
}

Diracsbracket

See the example code at https://doc.qt.io/qt-5/qml-qtquick-listview.html#isCurrentItem-attached-prop

PawlosCK

I tried it and other ideas. I put

color: ListView.isCurrentItem ? "black" : "red"

into Rectangle and only first item is black and other are red. When I click other item, color is not changed.

PawlosCK

https://github.com/pawlosck/QMLClock/blob/aaf6c65e5c1cd775c65a510f72d11de339da3709/alarm_list_window.qml

The most important things:

Item change color if is selected or not. Selected Item is black and other is red

color: ListView.isCurrentItem ? "black" : "red"

Add MouseArea with onClicked into ListView to change current Item using mouse.

        MouseArea
        {
            anchors.fill: parent

            onClicked: setCurrentItem(mouseX, mouseY)
        }

Full code of ListView

    ListView
    {
        spacing: 5
        clip: true

        id: listviewID
        anchors.fill: parent

        width: parent.width
        height: parent.height/2
        model: modelID
        delegate: delegatID

        MouseArea
        {
            anchors.fill: parent

            onClicked: setCurrentItem(mouseX, mouseY)
        }
    }

Full code of delegate with Items

  Component
    {
        id: delegatID
        Rectangle
        {
            id: alarmItemDelegate
            width: listviewID.width
            height: 50
            border.width: 1
            radius: 5

            color: ListView.isCurrentItem ? "grey" : "transparent"
            Item
            {
                anchors.fill: parent
                Text
                {
                    id: remainingAl
                    x: 5
                    anchors.top: parent.top
                    text: "Remaining: " + model.remainingTime
                    color: alarmItemDelegate.ListView.isCurrentItem ? "yellow" : "black"
                }
                Text
                {
                    id: typeAl
                    x: 5
                    anchors.verticalCenter: parent.verticalCenter
                    text: "Type: " + model.typeAlarm
                    color: alarmItemDelegate.ListView.isCurrentItem ? "yellow" : "black"
                }
                Text
                {
                    id: messageAl
                    x: 5
                    anchors.bottom: parent.bottom
                    text: "message: " + model.messageAlarm
                    color: alarmItemDelegate.ListView.isCurrentItem ? "yellow" : "black"
                }
            }
        }
    }