ListView - how to highlight current item
Solved
QML and Qt Quick
-
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++ } } } }
-
See the example code at https://doc.qt.io/qt-5/qml-qtquick-listview.html#isCurrentItem-attached-prop
-
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" } } } }