Qt、QML列表视图和桌面应用程序

我的问题是一个由两部分组成的条件问题。我有一个用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
    }
}

导入QtQuick 1.0
项目
{
宽度：300
身高：200
列表模型
{
id:myModel2
ListElement{text:“列表项1”}
ListElement{text:“列表项2”}
ListElement{text:“列表项3”}
ListElement{text:“列表项4”}
ListElement{text:“列表项5”}
ListElement{text:“列表项6”}
}
组成部分
{
id:beerDelegate
矩形
{
id:beerDelegateRectangle
高度：beerDelegateText.height*1.5
宽度：parent.width
正文
{
id:beerDelegateText
文本：“+modelData+”（“+modelData+”）
}
鼠耳
{
锚定。填充：父级
再次点击：
{
log（“在索引：+index处单击：+modelData+”）；
beerList.currentIndex=索引；
}
}
}
}
列表视图
{
id:beerList
锚定。填充：父级
型号：myModel2
代表：比尔德大使
highlightFollowsCurrentItem:true
突出显示：矩形
{
宽度：parent.width
颜色：“红色”
}
焦点：正确
}
}

考虑到这个QML，我如何才能完成我想要的？还是在QWidget桌面应用程序中使用QML只是一个坏主意？

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

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

Component
{
    id: beerDelegate

    Item
    {
        ...
    }
}

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

---

据我所知，QML不提供现成的滚动条。然而，有（）允许您访问QML世界中的大多数小部件。其中，第二个问题有一个

滚动区域

。i、 e列表视图上的滚动条： 我已经为ListView上的滚动条创建了代码。它也可以在网格视图上工作

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

此滚动条项可与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
}

---

不再需要自己实现滚动条。自Qt 5.1以来存在-项。只需将

Flickable

-项（例如，您使用的ListView项也是“Flickable”）与ScrollView项环绕在一起，您就可以：

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

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

        focus: true
    }
}

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

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

        focus: true
    }
}