Important: Please read the Qt Code of Conduct - https://forum.qt.io/topic/113070/qt-code-of-conduct

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


  • Moderators

    @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


  • Moderators

    @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


  • Moderators

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


  • Moderators

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


  • Moderators

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


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

    51ED9BD6-D75D-4010-8BCC-4929FF907284.jpeg


Log in to reply