QML, ListView and Frustration

[zethon]

I have a C++ QWidget project in which I'd like to use QML for a couple of lists I have in the application. However, I find that doing something as simple as highlighting an item that is clicked on is proving to be difficult. I can't wait to see what a frustration this is will be when I go to add a scroll bar to my list. Anyway, I'm sure it's just because I'm new to QML but still, it's infuriating.

I have a QML file with some sample model data that looks like:

import QtQuick 1.0
 
Item
{
    width: 300
    height: 200
 
    ListModel
    {
        id: myModel2
 
        ListElement { text: "List Item 1" }
        ListElement { text: "List Item 2" }
        ListElement { text: "List Item 3" }
        ListElement { text: "List Item 4" }
        ListElement { text: "List Item 5" }
        ListElement { text: "List Item 6" }
    }
 
    Component
    {
        id: beerDelegate
 
        Rectangle
        {
            id: beerDelegateRectangle
            height: beerDelegateText.height * 1.5
            width: parent.width
 
            Text
            {
                id: beerDelegateText
                text: "<b>" + modelData + "</b> <i>(" + modelData + ")</i>"
            }
 
            MouseArea
            {
                anchors.fill: parent
                onClicked: 
				{
                    console.log("clicked: " + modelData + " at index: " + index);
                    beerList.currentIndex = index;
                }
            }
        }
    }
 
    ListView
    {
        id: beerList
        anchors.fill: parent
        model: myModel2
        delegate: beerDelegate
 
        highlightFollowsCurrentItem: true
        highlight: Rectangle
        {
            width: parent.width
            color: "red"
        }
 
        focus: true
    }
}

import QtQuick 1.0
 
Item
{
    width: 300
    height: 200

    ListModel
    {
        id: myModel2

        ListElement { text: "List Item 1" }
        ListElement { text: "List Item 2" }
        ListElement { text: "List Item 3" }
        ListElement { text: "List Item 4" }
        ListElement { text: "List Item 5" }
        ListElement { text: "List Item 6" }
    }

    Component
    {
        id: beerDelegate

        Rectangle
        {
            id: beerDelegateRectangle
            height: beerDelegateText.height * 1.5
            width: parent.width

            Text
            {
                id: beerDelegateText
                text: "<b>" + modelData + "</b> <i>(" + modelData + ")</i>"
            }

            MouseArea
            {
                anchors.fill: parent
                onClicked: 
				{
                    console.log("clicked: " + modelData + " at index: " + index);
                    beerList.currentIndex = index;
                }
            }
        }
    }
 
    ListView
    {
        id: beerList
        anchors.fill: parent
        model: myModel2
        delegate: beerDelegate

        highlightFollowsCurrentItem: true
        highlight: Rectangle
        {
            width: parent.width
            color: "red"
        }

        focus: true
    }
}

To copy to clipboard, switch view to plain text mode 

This is adapted from a couple examples I found online. All I'm trying to do with now is get an item to be highlighted in red when I click on it. I thought that by defining the "highlight" property in my ListView (beerlist) and handling "onClicked" it should do it but.. ugh...

This is incredibly frustration and makes little sense to me right now. Help, please?

[wysota]

It seems to me your delegate overdraws the highlight. Change the delegate's item from "Rectangle" to "Item".

[zethon]

Thank you.

In general, is QML a viable option for good ol' fashion desktop applications? For example, my main goal with this question was to create a list box similar to a buddy list, with images and rich text. Is this something that would be better done in QML? Or perhaps with something like QListWidget?

Thanks again.

[anda_skoa]

Really depends on the context.
QtQuick has the advantage that is allows you to have all kinds of animations, e.g. when the list's content changes.

Of course it requires a different skill set, so you'll have to put quite some time into learning it properly.
If you are already good at using Qt's C++ API you might get further faster using a QListWidget or a QListView with a custom item delegate.

Cheers,
_

[raunvivek]

This solution might be helpful to other developers.

Change the code as per below:

import QtQuick 1.0

Item
{
width: 300
height: 200

ListModel
{
id: myModel2

ListElement { text: "List Item 1" }
ListElement { text: "List Item 2" }
ListElement { text: "List Item 3" }
ListElement { text: "List Item 4" }
ListElement { text: "List Item 5" }
ListElement { text: "List Item 6" }
}

Component
{
id: beerDelegate

Rectangle
{
id: beerDelegateRectangle
height: beerDelegateText.height * 1.5
width: parent.width

Text
{
id: beerDelegateText
text: "<b>" + modelData + "</b> <i>(" + modelData + ")</i>"
}

MouseArea
{
anchors.fill: parent
onClicked:
{
console.log("clicked: " + modelData + " at index: " + index);
beerList.currentIndex = index;
beerList.highlight = highlightBar; // Load this as a seperate component onclick of mouse
}
}
}
}

ListView
{
id: beerList
anchors.fill: parent
model: myModel2
delegate: beerDelegate

//highlightFollowsCurrentItem: true
//highlight: Rectangle
//{
// width: parent.width
// color: "red"
//}

focus: true
}

// Component to control ListView highlight property
Component {
id: highlightBar
Rectangle {
//width: 200; height: 50
color: "lightgrey"
// y: listView.currentItem.y;
// Behavior on y { SpringAnimation { spring: 2; damping: 0.1 } }
}
}
}

[anda_skoa]

This solution might be helpful to other developers.

wysota already explained the solution, simply not painting over the highlight.

If you really feel the need to resurrect a 3 year old thread just to post some code that is mostly commented out, it would be nice if it would at least be done with proper code tags.

Even more ideally maybe not post half backed work arounds into threads that have a proper solution already.

Someone might find this thread, not read the comments and conclude the code you posted is the way to go instead of using the trivial solution provided in the very first comment.

Cheers,
_