为什么水平滚动条在 listview qml 上不起作用？

Question

我几乎使用了 Stackoverflow 上的所有解决方案来使其正常工作。但他们都没有工作吗？

可以进行哪些更改以使水平滚动条正常工作？

我也使用了 qt 文档，但仍然不起作用。请举一些例子。我只需要在列表视图中水平滚动。或者还有其他的看法。

主.qml

Rectangle {

    id: frame

    width: 300
    height: 300
    anchors.top: meaning.bottom

     ListView {

        width: 300
        height: 300
        anchors.centerIn: parent
        id: myList
        model: myModel
        highlight: highlightBar
        clip: true

        snapMode: ListView.SnapToItem

        headerPositioning: ListView.OverlayHeader

        header: Rectangle {
            id: headerItem
            width: myList.width
            height: 30
            z: 2

            color: "gray"

            Text {
                text: "Simple Text List"
                color: "white"
            }
        }

        delegate: Item {
            id: delegateItem
            width: 400
            height: 20
            Text {
                text: name
            }

            MouseArea {
                id: mArea
                anchors.fill: parent
                onClicked: {
                    myList.currentIndex = index
                }
            }
        }
    }

    Component {
        id: highlightBar
        Rectangle {
            width: parent.width
            height: 20
            color: "#FFFF88"
        }
    }

    ListModel {
        id: myModel   
    }
 
    
        ScrollBar {
        id: vbar
        hoverEnabled: true
        active: hovered || pressed
        orientation: Qt.Vertical
        size: frame.height / content.height
        anchors.top: parent.top
        anchors.right: parent.right
        anchors.bottom: parent.bottom
    }

    ScrollBar {
        id: hbar
        hoverEnabled: true
        active: hovered || pressed
        orientation: Qt.Horizontal
        size: frame.width / content.width
        anchors.left: parent.left
        anchors.right: parent.right
        anchors.bottom: parent.bottom
    }
} 

请对此进行更改，以便水平滚动工作。谢谢。

Answer 1

QMLListView是一个Flickable子类。

要在 a 中显示滚动条，Flickable您需要提供contentWidth和/或contentHeight和所需的flickableDirection.

ListView下面是一个双向滚动的示例：

import QtQuick
import QtQuick.Controls
import QtQuick.Window

Window {
  visible: true
  width: 640
  height: 480
  title: qsTr("Hello World")

  ListView {
    anchors.fill: parent
    ScrollBar.vertical: ScrollBar {}
    ScrollBar.horizontal: ScrollBar {}
    flickableDirection: Flickable.HorizontalAndVerticalFlick
    contentWidth: 1000
    model: ["lorem", "ipsum", "dolor", "sit", "amet", "consectetur", "adipiscing", "elit", "sed", "do", "eiusmod", "tempor", "incididunt", "ut", "labore", "et", "dolore", "magna", "aliqua", "ut", "enim", "ad", "minim", "veniam", "quis", "nostrud", "exercitation", "ullamco", "laboris", "nisi", "ut", "aliquip", "ex", "ea", "commodo", "consequat", "duis", "aute", "irure", "dolor", "in", "reprehenderit", "in", "voluptate", "velit", "esse", "cillum", "dolore", "eu", "fugiat", "nulla", "pariatur", "excepteur", "sint", "occaecat", "cupidatat", "non", "proident", "sunt", "in", "culpa", "qui", "officia", "deserunt", "mollit", "anim", "id", "est", "laborum"]
    delegate: Label {
      width: ListView.view.width
      horizontalAlignment: Text.AlignHCenter
      text: modelData
    }
  }
}