Qt、QML ListView 和桌面应用程序

Question

我的问题是一个两部分的条件问题。我有一个用 C++/Qt 编写的桌面应用程序。在应用程序中，我有几个列表要装饰并添加带有图标和富文本的列表项。

我第一次尝试在 QWidget 世界中做到这一点，但我越是研究它，我就越认为 QML 可能是一个更好的选择。但现在我也想知道这一点，因为 QML 似乎更适合触摸屏设备。更不用说我在 QML 方面的进展令人沮丧。在下面给他们 QML，我不知道如何：（1）当我点击一个项目时突出显示它，（2）添加一个滚动条：

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

鉴于此 QML，我如何才能完成我正在寻找的东西？还是在 QWidget 桌面应用程序中使用 QML 只是一个坏主意？

Answer 1

对于第一个问题（突出显示）：

您的列表实际上绘制了突出显示，但是，您的项目委托用白色矩形覆盖了它！只需将矩形替换为项目即可：

Component
{
    id: beerDelegate

    Item
    {
        ...
    }
}

对于第二个问题（滚动条）：

据我所知，QML 没有提供开箱即用的滚动条。然而，Qt Desktop Components project (git repository) 可以让您访问 QML 世界中的大多数小部件。其中，有一个ScrollArea。

Answer 2

不再需要自己实现滚动条。从 Qt 5.1 开始就有ScrollView-Item。只需将 Flickable-Item （例如，您使用的 ListView-Item 也是“可滑动的”）与 ScrollView-Item 包围起来，就可以了：

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

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

        focus: true
    }
}

Answer 3

第二个问题。即 ListView 上的滚动条： 我已经为 ListView 上的滚动条创建了代码。它也可以在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;
                        }
                    }
                }
            }
        }
    }
}

我在 MyListView.qml 中将滚动条项与 ListView 一起使用：

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
}

这个 ScrollBar item 可以和 GridView 一起使用

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
}