web-dev-qa-db-fra.com

QML: attachez la barre de défilement à ListView

J'ai un problème avec ListView. ListView est trop long et une partie de celui-ci apparaît en dehors de la fenêtre mais je ne peux pas attacher une barre de défilement. J'ai essayé de nombreuses combinaisons différentes. Je pense que le problème réside dans le paramètre de hauteur, mais s'il le supprime, ListView n'affiche que la première entrée.

Column{
    anchors.fill: parent
    Row{
        id: buttonsRow
            Button{
                text: "Open dump file"
                onClicked: fileDialog.visible = true
            }
            Button{
                text: "Copy raw data to clipboard"
            }
    }
    ListView{
        id: listView
        anchors.top: buttonsRow.bottom
        height: contentHeight
        //clip: true
        flickableDirection: Flickable.VerticalFlick
        boundsBehavior: Flickable.StopAtBounds
        interactive: true
        model: ListModel{
            id: listModel
        }
        delegate: MDelegate{}
    }
}

Existe-t-il un moyen de le faire défiler?

7
Marzanna

La définition de height sur contentHeight est probablement le problème. Cela rendrait le ListView aussi élevé que toutes les hauteurs de son élément combinées. La barre de défilement ne fonctionne que lorsque la hauteur de la vue est inférieure à la hauteur de son contenu.

Voici une approche qui utilise des mises en page à la place:

import QtQuick 2.8
import QtQuick.Controls 2.1
import QtQuick.Layouts 1.3

ApplicationWindow {
    width: 400
    height: 300
    visible: true

    ColumnLayout {
        anchors.fill: parent

        RowLayout {
            id: buttonsRow
            Button {
                text: "Open dump file"
            }
            Button {
                text: "Copy raw data to clipboard"
            }
        }

        ListView {
            id: listView
            flickableDirection: Flickable.VerticalFlick
            boundsBehavior: Flickable.StopAtBounds
            model: 100
            clip: true
            delegate: ItemDelegate {
                text: modelData
            }

            Layout.fillWidth: true
            Layout.fillHeight: true

            ScrollBar.vertical: ScrollBar {}
        }
    }
}
6
Mitch

Je ne vois pas, dans le code que vous avez publié, où vous avez attaché une barre de défilement du tout. Vous devez réellement inclure un composant ScrollBar dans votre ListView, comme ceci:

    ListView { 
        id: listView
        ScrollBar.vertical: ScrollBar {
        active: true
        }
    }

Voir "Attacher ScrollBar à un Flickable" sur https://doc.qt.io/qt-5/qml-qtquick-controls2-scrollbar.html

6
WaltPurvis