Unsolved 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 :
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