Please nominate your Qt Champions for 2021! https://forum.qt.io/topic/132134/looking-for-the-2021-qt-champions

ListView - how to highlight current item



  • 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++
                }
            }
        }
    }
    
    
    




  • 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.



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

    The most important things:

    1. Item change color if is selected or not. Selected Item is black and other is red
    color: ListView.isCurrentItem ? "black" : "red"
    
    1. 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"
                    }
                }
            }
        }
    

Log in to reply