Qt, QML ListView and Desktop App

Question

My question is kind of a two part conditional question. I have a desktop application I'm writing in C++/Qt. In the app I have a couple lists that I want to decorate and add list items with icons and rich text.

I first attempted to do this with the QWidget world but the more I looked into it, the more I thought QML might be a better option. But now I'm wondering about that as well since it seems that QML Is more geared toward touch screen devices. Not to mention that my progress with QML has been frusating. Give them QML below, I cannot figure out how to: (1) get an item to highlight when I click it and (2) add a scroll bar:

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

How can I accomplish what I'm looking for given this QML? Or is using QML in a QWidget desktop app just a bad idea all around?

Answer 1

For the first question (highlight):

Your list actually draws the highlight, however, your item delegate overpaints this with a white rectangle! Just replace the rectangle with an item and it works:

Component
{
    id: beerDelegate

    Item
    {
        ...
    }
}

For the second question (scroll bars):

As far as I know, QML doesn't provide scroll bars out of the box. There is however the Qt Desktop Components project (git repository) which gives you access to most of the widgets in the QML world. Among them, there is a ScrollArea.

Answer 2

It is no longer necessary to implement the Scrollbars yourself. There is the ScrollView-Item since Qt 5.1. Simply surround a Flickable-Item (e.g. the ListView-Item you use, is also "Flickable") with the ScrollView-Item and you'll be fine:

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

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

        focus: true
    }
}

Answer 3

For the second question. i.e Scroll-bar on ListView: I have created code for scroll bar on ListView. It also can work on the GridView

ScrollBar.qml

import Qt 4.7

Item {
    property variant target

    width: 8
    anchors.top: target.top
    anchors.bottom: target.bottom
    anchors.margins: 1
    anchors.rightMargin: 2
    anchors.bottomMargin: 2
    anchors.right: target.right
    visible: (track.height == slider.height) ? false : true

    Image {
        id: scrollPath
        width: 2
        anchors.top: parent.top
        anchors.bottom: parent.bottom
        anchors.horizontalCenter: parent.horizontalCenter
        source: "qrc:/resources/buttons/slider2.png"
    }

    Item {
        anchors.fill: parent

        Timer {
            property int scrollAmount

            id: timer
            repeat: true
            interval: 20
            onTriggered: {
                target.contentY = Math.max(0, Math.min(target.contentY + scrollAmount,
                                                       target.contentHeight - target.height));
            }
        }

        Item {
            id: track
            anchors.top: parent.top
            anchors.topMargin: 1
            anchors.bottom: parent.bottom
            width: parent.width

            MouseArea {
                anchors.fill: parent
                onPressed: {
                    timer.scrollAmount = target.height * (mouseY < slider.y ? -1 : 1)
                    timer.running = true;
                }
                onReleased: {
                    timer.running = false;
                }
            }

            Image {
                id:slider
                anchors.horizontalCenter: parent.horizontalCenter
                source: "qrc:/resources/buttons/slider.png"
                width: parent.width
                height: Math.min(target.height / target.contentHeight * track.height, track.height) < 20 ? 20 : Math.min(target.height / target.contentHeight * track.height, track.height)
                y: target.visibleArea.yPosition * track.height

                MouseArea {
                    anchors.fill: parent
                    drag.target: parent
                    drag.axis: Drag.YAxis
                    drag.minimumY: 0
                    drag.maximumY: track.height - height

                    onPositionChanged: {
                        if (pressedButtons == Qt.LeftButton) {
                            target.contentY = slider.y * target.contentHeight / track.height;
                        }
                    }
                }
            }
        }
    }
}

And I used scroll bar item with ListView in MyListView.qml as:

MyListView.qml

ListView {
    id: list
    clip: true
    anchors.margins: 5
    anchors.fill: parent
    model: 10
    delegate: trackRowDelegate
    interactive: contentHeight > height
}

ScrollBar {
    id: verticalScrollBar
    target: list
    clip: true
}

This ScrollBar item can be used with GridView as

GridView {
    id: grid
    clip: true
    anchors.margins: 5
    anchors.fill: parent
    cellWidth:100
    cellHeight: 100
    model: items
    interactive: contentHeight > height
    snapMode: GridView.SnapToRow
    delegate: myDelegate
}

ScrollBar {
    id: verticalScrollBar
    target: grid
    clip: true
    visible: grid.interactive
}