Switch Keyboard-Focus between ListView and GridView



  • Lets say we have a list view component (ListBoxComponent):

    @Grid {
    Rectangle {
    width: 0
    height: 600
    id: rect

        ListBoxComponent {
            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?



  • Any help :(?


Log in to reply
 

Looks like your connection to Qt Forum was lost, please wait while we try to reconnect.