为什么QML中ListView的水平滚动条不起作用？

Question

我已经尝试了Stackoverflow上的几乎所有解决方案，但都没有起作用？

有哪些改变可以让水平滚动条工作？

我也查看了qt文档，但仍然无法正常工作。请提供一些示例。我只需要在listview中实现水平滚动，或其他视图也可以。

main.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
    }
} 

请修改这个代码，使得水平滚动能够正常工作。 谢谢。

- krmani

---

你的“不起作用”是什么意思？对我来说，我看到了水平条。它出了什么问题？ - folibis

它无法向左或向右滚动。 - krmani

现在你的滚动条在 ListView 外面，应该在里面。否则你会滚动 Rectangle 而不是 ListView。 - folibis

仍然无法工作。 - krmani

好的，据我所见，在Qt bug跟踪器中存在这样的问题，不幸的是它仍未得到解决。推荐的解决方法是只使用一个列的TableView。 - folibis

Answer 1

QML中的ListView是Flickable子类。

要在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
    }
  }
}

- Tassos