Key Navigation in ListView Component -> Set Focus to ListView Element

sf2212

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?