Important: Please read the Qt Code of Conduct - https://forum.qt.io/topic/113070/qt-code-of-conduct

Change focus on key press on Custom Component



  • Hello,

    I'm trying to manage the focus on some custom Component.
    I have succeed to change the focus on the click on the Component. But I'm trying to change it on key press but I don't know how to achieve it. The biggest difficulty here is that I could have some Component that are not visible sometimes.

    I do have made a simple example of what I'm trying to achieve.
    main.qml :

    Window {
        visible: true
        width: 640
        height: 480
        title: qsTr("Hello World")
    
    
        MyComponent{
            id: first
            width: parent.width
            height: parent.height/5
            anchors.top : parent.top
            focus: true
        }
    
        MyComponent{
            id: second
            width: parent.width
            height: parent.height/5
            anchors.top : first.bottom
        }
    
        MyComponent{
            id: notVisible
            width: parent.width
            height: parent.height/5
            anchors.top : first.bottom
            visible: false
        }
    
        MyComponent{
            id: third
            width: parent.width
            height: parent.height/5
            anchors.top : second.bottom
        }
    
        MyComponent{
            id: fourth
            width: parent.width
            height: parent.height/5
            anchors.top : third.bottom
        }
    
        MyComponent{
            id: fifth
            width: parent.width
            height: parent.height/5
            anchors.top : fourth.bottom
        }
    }
    
    

    MyComponent.qml:

    Item {
        id: container
    
        Rectangle{
            width: parent.width
            height: parent.height
    
            Rectangle{
                anchors.centerIn: parent
                width: parent.width/4
                height: parent.height-10
                radius: height/2
                color: container.focus ? "blue": "red"
            }
            MouseArea{
                anchors.fill: parent
                onClicked: container.forceActiveFocus()
            }
        }
    
    }
    
    

    If you run this code you should have something like this :
    0_1537775110202_0326297a-2ec8-422c-97c0-66b898f29800-image.png

    The focused element is blue.
    I want to change the focus on Up and Down arrow.

    I think I will use this :

            Keys.onDownPressed: {
               //Do something : give the focus to the next item visible below the current focused component
    
            }
            Keys.onUpPressed: {
               //Do something : give the focus to the next item visible above the current focused component
            }
    

    Does anybody can help me do that ?



  • Hi @DavidM29

    I think that you should better use ListView ,

    Have a look at this link

    https://qmlbook.github.io/ch06/index.html#keyboard-navigation-and-highlighting

    I hope this can help you !



  • @mostefa
    I tried with a ListView but I found out that I have some limitations. I opened a few discussion on the subject if you have time to take a look if you have any idea on how to help.

    Here are the 3 post I made earlier to try it with ListView, the one that still unsolved is the limitation I had.
    Solved : https://forum.qt.io/topic/94712/listview-of-custom-component
    Solved : https://forum.qt.io/topic/94722/handle-the-highlight-of-listview/4
    Unsolved : https://forum.qt.io/topic/94776/highlight-sizing/3


Log in to reply