Solved Handle the highlight of ListView
-
@DavidM29 hi,
@DavidM29 said in Handle the highlight of ListView:
The mouse area don't have the hovered property
yes but it has containsMouse : bool, you can emulate the same behavior
-
@LeLev
The containMouse don't seems to work for me but I found the entered which seems to works fine. But know I need a way to simulate the click in the mouse area. -
@DavidM29 said in Handle the highlight of ListView:
The containMouse don't seems to work for me
hoverEnabled:true must work (i cant test now)
-
@LeLev said in Handle the highlight of ListView:
hoverEnabled
Try it as well but the only working is entered which activate when I the mouse entrer in the mouse area which is the same as hovered to me
-
@DavidM29 perfect
-
@LeLev Do you know how could I sent a press event on the mouse area ? Because my Custom button change it style as I press it and I want to keep that.
By the way I would like to have the up and down arrow working do you have any clue for that ?
-
The up and down keys not working is a problem of focus, make sure that the Item where the Keys.on*Pressed has activeFocus.
For changing your currentItem on click, do you want it to change also when clicking a button in your delegate, or just when clicking in the delegate but not on the buttons?
Do you want it to happen on click or just on press? (Click is press + release)If you want further help, I advise you to send a complete but small self contained example that we could reproduce.
Sending touch events manually is a rabbit hole you don't want to go down.
-
@GrecKo
Thank you I'll try to look at my focus at the moment I can't have the keys to work.I would like to be able to change the currentItem when I click on the delegate and be able to use the two buttons and if possible as well change the current item when I click on the button of any other item.
If I still have issue using the up and down keys I will make a complete example.
-
@GrecKo
I got the up and down key to work. It was indeed because of the focus knonw I'll have to find a way to give the focus to the right element a the good time. Thank you very much.I still need to get the button to work now.
-
For the click, I see two sensible solutions.
Have a
MouseArea
in your delegate that's above your buttons.
on theonPressed
handler, set the currentIndex and reject the mouse event (mouse.accepted = false
) so the buttons below can receive it.If you want it to work on click and not on press, you would have to position the
MouseArea
below your buttons and set the currentIndex in theonClicked
handlers of your buttons and yourMouseArea
. -
Thank you for those two ideas I'll try the first. The onPressed is good to me. It kind of tricky but it could works.
-
@GrecKo
It seems to work quick good. Except that sometime after I change a few time the current index by clicking on a button the program crash completly.I got this error message :
ASSERT: "item->contains(localPos)" in file items\qquickwindow.cpp, line 2549 Invalid parameter passed to C runtime function. Invalid parameter passed to C runtime function.
Here is the code I use :
The window with the ListView :
Rectangle{ id: container anchors.fill: parent color: "transparent" ListModel { id: myModel ListElement { libelleBoutonG: "Ouvrir" libelleBoutonD: "Fermer" icone: "../img/sun.svg" } ListElement { libelleBoutonG: "Ouvrir" libelleBoutonD: "Fermer" icone: "../img/sun.svg" } ListElement { libelleBoutonG: "Ouvrir" libelleBoutonD: "Fermer" icone: "../img/sun.svg" } ListElement { libelleBoutonG: "Ouvrir" libelleBoutonD: "Fermer" icone: "../img/sun.svg" } ListElement { libelleBoutonG: "Ouvrir" libelleBoutonD: "Fermer" icone: "../img/sun.svg" } ListElement { libelleBoutonG: "Ouvrir" libelleBoutonD: "Fermer" icone: "../img/sun.svg" } ListElement { libelleBoutonG: "Ouvrir" libelleBoutonD: "Fermer" icone: "../img/sun.svg" } ListElement { libelleBoutonG: "Ouvrir" libelleBoutonD: "Fermer" icone: "../img/sun.svg" } ListElement { libelleBoutonG: "Ouvrir" libelleBoutonD: "Fermer" icone: "../img/sun.svg" } } Component{ id: del FonctionManuelle{ id : wrapper height: container.height/4 width: container.width libelleBoutonG: model.libelleBoutonG libelleBoutonD: model.libelleBoutonD icone: model.icone states: State { name: "Current" when: wrapper.ListView.isCurrentItem PropertyChanges { target: wrapper; x: 20 } } MouseArea { anchors.fill: parent propagateComposedEvents: true onPressed: { mouse.accepted = false listView.currentIndex = index listView.forceActiveFocus() } } } } Keys.onDownPressed: { //Listen for down arrow pressed listView.incrementCurrentIndex() } Keys.onUpPressed: { //Listen for Up arrow pressed listView.decrementCurrentIndex() } Component { id: highlight Rectangle { width: container.width*0.99 height: container.height/4 anchors.horizontalCenter: parent.horizontalCenter radius: 5 color: "#8f9193" y: listView.currentItem.y; } } ListView{ id: listView anchors.fill: parent clip: true anchors.horizontalCenter: parent.horizontalCenter model: myModel delegate: del highlight: highlight highlightFollowsCurrentItem: false focus: true //currentIndex: 0 spacing: 10 } }
FonctionManuelle.qml
Item { anchors.horizontalCenter: parent.horizontalCenter property string libelleBoutonG : "" property string libelleBoutonD : "" property alias btnG: op property alias btnD: clo property string icone: "" property bool isFocused: false Rectangle{ width: parent.width height :parent.height color: "transparent" Rectangle{ width: parent.width/1.5 height: parent.height anchors.horizontalCenter: parent.horizontalCenter radius: height/4 CustomButton{ id: op libelle: libelleBoutonG anchors.right: test.left anchors.rightMargin: parent.width/11 anchors.verticalCenter: test.verticalCenter } Image { id: test source: icone height: 100 width: height*2 anchors.centerIn: parent fillMode: Image.PreserveAspectFit sourceSize.width: width sourceSize.height: height } CustomButton{ id: clo libelle: libelleBoutonD anchors.left : test.right anchors.leftMargin: parent.width/11 anchors.verticalCenter: test.verticalCenter } } } }
CustomButton.qml :
Rectangle{ property string libelle: "" property alias press: press width: name.width < 100 ? 100 : 250 height: 30 border.width: 1 border.color: "black" radius: height/2 color: press.pressed ? "#e30613" : "white" Text{ id: name text: qsTr(libelle) font.pixelSize: 13 font.bold: true anchors.centerIn: parent z:99 } MouseArea{ id: press anchors.fill: parent } }
Do you see anything wrong here ? Can you try to reproduce the bug I have ? It work fine for 10 to 15 click and then crash. Usualy when I decrement the index.
Could it be this line from the Highlightbar ? :
y: listView.currentItem.y;
Edit :
I think I found the reason. It is as soon as I click on a button that require the ListView to scroll. The scroll probably don't have the time to end and the Highlight don't know where it should go. Do you have any idea how can I prevent this behaviour ?
Like maybe finish the scroll then change the currentItem. but I don't know how to make asynchronous action in C++/QML -
I found a solution to not use the line :
y: listView.currentItem.y;
Here is what I have done :
I remove the previous line and change :
highlightFollowsCurrentItem: false
to :
highlightFollowsCurrentItem: true
And everything seems good now.