0

私の質問は、2つの部分からなる条件付きの質問のようなものです。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を使用するのは悪い考えですか？

4

3 に答える 3

1

最初の質問（ハイライト）の場合：

リストは実際にハイライトを描画しますが、アイテムデリゲートはこれを白い長方形で塗りつぶします。長方形をアイテムに置き換えるだけで、機能します。

Component
{
    id: beerDelegate

    Item
    {
        ...
    }
}

2番目の質問（スクロールバー）の場合：

私の知る限り、QMLはすぐに使用できるスクロールバーを提供していません。ただし、QMLの世界のほとんどのウィジェットにアクセスできるQtデスクトップコンポーネントプロジェクト（gitリポジトリ）があります。その中には、がありScrollAreaます。

于 2012-12-08T15:53:11.303 に答える
1

スクロールバーを自分で実装する必要はなくなりました。ScrollViewQt5.1以降に-Itemがあります。-Item Flickable（たとえば、使用する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
    }
}
于 2014-11-24T12:40:08.503 に答える
0

2番目の質問について。つまり、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
}
于 2014-07-16T18:04:43.620 に答える