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?
↧