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?