Manage a focus property on a custom component

[DavidM29]

Hello,

I have a custom component that contain an Image and two button inside a rectangle.
I created a boolean property that I want to switch from false to true once the component gain focus.
Here is an example of the component without focus :

and here with focus :

I do have multiple component like that on a page.
What I plan here is when I press bottom arrow I give focus to the next element under it. If I press le left arrow it will press the left button of my component.
My problem is that I don't know how could I handle the down and up arrow management to switch focus from one component to another.

Does anybody know how can I achieve that ?

Maybe I'm doing it all wrong and there is an easy way to achieve this kind of action. If so I'm all ears.

Thank you in advance for your help

[J.Hilk]

hi @DavidM29

qml has the Keys item, you can use to listen to key presses e.g

Keys.onDownPressed: { //signal on down arrow key
            console.log("downarrow");
            event.accepted = true;
    }

than its just a matter of keeping track on what item has focus and than call focus = true on the next one you want to have focus.

[DavidM29]

@J.Hilk
I agree with you that is what I imagined at first. But my problem here is to handle the focus switch from an element to another. Knowing that I can also have element that are not visible....

I know how to get the signal from key press, but I don't know how to change my property to the right component.

Sorry if my first question was not really clear on that.