We use keyNavigation in a ListView, using a FocusScope. If one element in the ListView is set to “disabled” we expect, the active Focus to skip over the disabled element!
For example:
[] is activeFocus
+ is enabled: true
- is diabled (enabled:false)
# is focus: true
Initial ListView: (fig. 1)
+ # [Element 1]
+ Element 2
+ Element 3
- Element 4
+ Element 5
Key.down (1): (fig. 2)
+ Element 1
+ # [Element 2]
+ Element 3
- Element 4
+ Element 5
Key.down (2): (fig. 3)
+ Element 1
+ Element 2
+ # [Element 3]
- Element 4
+ Element 5
Key.down (3): (fig. 4)
+ Element 1
+ Element 2
+ Element 3
- # Element 4
+ Element 5
Key.down (4): (fig. 5)
+ Element 1
+ Element 2
+ Element 3
- Element 4
+ # [Element 5]
We expected that on Key.down (fig. 3 to fig. 4) the Element 5 will get the focus and the active Focus.
Actually that’s not happening. After that operation the ActiveFocus is lost It seems, the ActiveFocus is simply vanishing, no element seem to be focused anymore.
If we use the tab key it works like expected, the active focus skips Element 4 and went directly the Element 5
Example Code:
…
ListModel {
id: demoModel
ListElement { name: "Element 1"}
ListElement { name: "Element 2"}
ListElement { name: "Element 3"}
ListElement { name: "Element 4"}
ListElement { name: "Element 5"}
}
ListView {
width: 100
height: 250
id: demolistView
model: demoModel
delegate: Rectangle {
id: demobutton
width: 100
height: 50
enabled: index === 2 ? false : true // disable element 3
color: "orange"
// make active Focus visible with red border
border.width: activeFocus? 2: 0
border.color: activeFocus? "red": "transparent"
Text{
id: demobuttonlabel
anchors.fill: parent
text: name
color: enabled ? "black" : "grey" // diasbled Text is grey
verticalAlignment: Text.AlignVCenter
horizontalAlignment: Text.AlignHCenter
}
MouseArea {
anchors.fill: parent
onClicked: {
demobutton.forceActiveFocus() //Set activeFocus on clicked element
}
} // MouseArea
} // Delegate
} // ListView
↧