Unsolved Highlight property in Qt for MCU
-
I am trying to implement ListView.
I want to highlight the current item with a rectangular border.
It was possible earlier using the highlight property, but this property is missing from QUL.
Here is a code snippet:ListView { id: listView anchors.fill: root anchors.topMargin: 32 anchors.bottomMargin: 20 model:myModel delegate: listDelegate highlight: Item { Rectangle { anchors.centerIn: parent width: parent.width + 8 height: parent.height + 8 color: "transparent" radius: 8 } } }
When I try to build I get:
error: Binding on property of unknown type
highlight: Item {Any suggestions on how to achieve this?
-Thanks
-
@Sachin_Og inside your listDelegate you can check for being the current item and change the background color in there to reflect that, for example:
ListView{ id:lView anchors.fill: parent model: 10 delegate: Rectangle{ width: lView.width height: 20 property bool highlight: lView.currentIndex == index color: highlight ? "red" : "green" Text { id:te text: index anchors.centerIn: parent } MouseArea{ onClicked: lView.currentIndex = index anchors.fill: parent } } }
-
Thank you @J-Hilk for the quick response.
However I am facing an error
error: Type lView_ListView does not have a property currentIndex for reading
and again for writing as well.Is there something I missed.
I have imported QtQuick 2.0 and QtQuick.Controls 2.0.-Thanks
-
@Sachin_Og I don't have Qt for MCU, but currentIndex is available in 2.0 versions of QQuick for desktop
Can you show your code, where this problem arises ?
-
I copy pasted your code directly to understand its behaviour.
and the problem arises in following lines:property bool highlight: lView.currentIndex == index
and
onClicked: lView.currentIndex = index
Also I believe there are several properties that are removed from Qt for MCU due to memory constraints.
Qt for MCU uses only Qt ultralite library as per my understanding.
Hence I am facing such issues otherwise a lot of Desktop solutions are available in various forums.-Thanks
-
@Sachin_Og well, as long as index is available...
ListView{ id:lView anchors.fill: parent property int currentIndex: -1 model: 10 delegate: Rectangle{ width: lView.width height: 20 property bool highlight: lView.currentIndex == index color: highlight ? "red" : "green" Text { id:te text: index anchors.centerIn: parent } MouseArea{ onClicked: lView.currentIndex = index anchors.fill: parent } } }
-
Thankyou @J-Hilk that works.
However when I try to changecolor: highlight ? "red" : "green"
to
border.color: highlight ? "red" : "green"
The compiler wont allow it saying:
error: Group property of unknown type
border.color: "green"Is this again related to Qt for MCU or I did something wrong?
-Thanks
-
@Sachin_Og well, that seems right, looks like a restriction of Qt for MCU, but a serious one oO
-
quick and dirty and probably not really suited for MCU (when they removed the border property to begin with)
ListView{ id:lView anchors.fill: parent model: 10 delegate: Item{ width: lView.width height: 20 property bool highlight: lView.currentIndex == index Canvas{ anchors.fill:parent property color borderColor: highlight ? "red" : "green" onPaint:{ var ctx = getContext("2d"); ctx.beginPath(); ctx.rect(0, 0, width, height); ctx.strokeStyle = borderColor; ctx.stroke(); } } Text { id:te text: index anchors.centerIn: parent } MouseArea{ onClicked: lView.currentIndex = index anchors.fill: parent } } }
-
@J-Hilk It does not support Canvas either.
Anyways atleast I got highlight part with your help.I will probably try 2 rectangles or borderImage and update here if it fits my goal.
-Thanks
-
@Sachin_Og https://doc.qt.io/QtForMCUs/qml-qtquick-borderimage.html#border-prop so border.color property is missing. Can you raise a feature request for this from the Support Portal of your Qt Account?