Switch Keyboard-Focus between ListView and GridView
-
Lets say we have a list view component (ListBoxComponent):
@Grid {
Rectangle {
width: 0
height: 600
id: rectListBoxComponent { id:navigator1 width: 0 height: parent.height PropertyAnimation { id: animation; target: navigator1; property: "width"; to: 250; duration: 300 } } Component.onCompleted: { animation.running = true; } }
}@
This ListBoxComponent has a ListView with an own model for displaying content items. Works good so far.
Now I want to switch the keyboard focus from a list view item to another component outside from the list view.
In this case another GridView component:
@Grid {
id: grid1
Rectangle {
id: rectangle1
width: parent.width
height: parent.height
color: "#304864"
GridView {
id:listView2
width: parent.width
height: parent.height
anchors.left: parent.left
anchors.leftMargin: 60
anchors.top: parent.top
anchors.topMargin: 20
cellWidth: 220; cellHeight: 140
layoutDirection: Qt.LeftToRight
FolderListModel {
id: folderModel
nameFilters: ["*.jpg"]
folder: "images/cats"
}
Component {
id: fileDelegate
Image {
source: folderModel.folder + "/" + fileName
id:image1
width: 150; height: 150
fillMode: Image.PreserveAspectFit
smooth: true
states: State {
when: image1.GridView.isCurrentItem
PropertyChanges { target: image1; scale: 1.5; opacity: 1;}
}
transitions: [
Transition {
NumberAnimation { properties: "scale, opacity"; easing.type: Easing.InOutCubic; duration: 300 }} ] } } boundsBehavior: Flickable.StopAtBounds model: folderModel delegate: fileDelegate focus:true } clip:true }
}@
I have registered a key event on each list view item inside *ListView *component:
@ Keys.onRightPressed: {
console.log("Right pressed -> loose focus")
listView1.focus = false;
/* switchFocusToElement.focus= true;*/
} @The goal is to "pass" the component id to the list view elements so that I am able to change focus property manually to the GridView component.
How is this possible?