Highlight property in Qt for MCU

[Sachin_Og]

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

[J.Hilk]

@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
            }
        }
    }

[Sachin_Og]

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

[J.Hilk]

@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 ?

[Sachin_Og]

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

[J.Hilk]

@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
            }
        }
    }

[Sachin_Og]

Thankyou @J-Hilk that works.
However when I try to change

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

[J.Hilk]

@Sachin_Og well, that seems right, looks like a restriction of Qt for MCU, but a serious one oO

[J.Hilk]

@J-Hilk

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
            }
        }
    }

[Sachin_Og]

@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

[auri]

@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?