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桌面組件項目 （ git存儲庫 ），它允許您訪問QML世界中的大多數小部件。 其中，有一個ScrollArea 。

Answer 2

不再需要自己實現Scrollbars。 自Qt 5.1以來就有ScrollView -Item。 只需使用ScrollView-Item環繞一個Flickable -Item（例如你使用的ListView-Item，也是“Flickable”）你就可以了：

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項可以與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
}