Key Navigation in ListView Component -> Set Focus to ListView Element
-
Hello,
following ListView with some custom components:
@ Rectangle {
height: 107
width: 315
anchors.top: parent.top
anchors.topMargin: 29
radius: 2
border.color: "#5c6479"
color: "#050822"
clip:true
Component {
id: listDelegate
Item {
height: 27
Rectangle {
MenuButtonStyle {
width: 305
anchors.leftMargin: 5
style: MyButtonStyle {
label: ButtonTextStyle {
horizontalAlignment: Text.AlignHCenter
text: name
}
}
}
}
Keys.onDownPressed: {
console.log("Down key " + listView1.currentIndex.toString());
listView1.incrementCurrentIndex();
}
Keys.onUpPressed: {
console.log("Up key " + listView1.currentIndex.toString());
listView1.decrementCurrentIndex();
}
}
}ListView { boundsBehavior: Flickable.StopAtBounds id: listView1 anchors.top: parent.top anchors.fill: parent model: ContentListModel {} delegate: listDelegate } }@
MyButtonStyle is defined like this:
@ButtonStyle {
background: Rectangle {
id: rect
border.width: control.activeFocus ? 1 : 0
radius: 2
gradient: Gradient {
GradientStop {
position: 0
color: control.focus ? "white" : "transparent"
}
GradientStop {
position: 0.4
color: control.focus ? "#f5f5f5" : "transparent"
}GradientStop { position: 1.0 color: control.focus ? "#575857" : "transparent" } } }
}@
If a tab with "Tabulator" Key the color is successfully changed when selecting an element,
I want this also for elements inside my ListView component when hitting up or down key. Selecting next element and scrolling works so far.
But setting the focus so that property "control.activeFocus" is true did not work. Any hints?