时间戳

首页 > 解决方案 > QML ListView::contentWidth 比实际内容更宽

qt - QML ListView::contentWidth 比实际内容更宽

问题描述

尝试通过单击按钮来实现 ListView 的内容滚动。当滚动到视图的末尾时，ListView 的内容不会在最后一张图片的末尾停止，它会过度滚动。下面我提供了最小的工作示例以及预览出了什么问题。只需更改.img路径以使其在您的 PC 上运行。我在 ListView 及其继承的父级 Flickable 的来源中寻找一些帮助，但没有什么可以帮助解决问题。如何让它停在最后一张图片的末尾？

在此处输入图像描述

import QtQuick 2.14
import QtQuick.Window 2.14

Window {
    visible: true
    width: 1024
    height: 300

    Item {
        id: root

        anchors.fill:  parent

        property var imagesUrlModel: ["file:///C:/Users/mikha/OneDrive/Изображения/toyota.jpg",
            "file:///C:/Users/mikha/OneDrive/Изображения/toyota.jpg"
        ]

        property int _width: 0

        Component {
            id: imageDelegate

            Image {
                id: image

                sourceSize.height: 300

                source: modelData
                fillMode: Image.Stretch
            }
        }

        Rectangle {
            id: leftButton
            anchors.top: root.top
            anchors.bottom: parent.bottom
            anchors.topMargin: 15
            anchors.leftMargin: 10
            anchors.left: parent.left

            color: "green"

            width: 25

            MouseArea {
                anchors.fill: parent

                onClicked: {
                    listView.contentX = listView.contentX > 0
                            ? listView.contentX - 50 > 0 ? listView.contentX - 50 : 0
                            : 0
                }
            }
        }

        Rectangle {
            id: rightButton

            anchors.top: root.top
            anchors.bottom: parent.bottom
            anchors.topMargin: 15
            anchors.rightMargin: 10
            anchors.right: parent.right

            color: "green"

            width: 25

            MouseArea {
                anchors.fill: parent

                onClicked: {
                    listView.contentX = listView.contentX < listView.contentWidth
                            ? listView.contentX + 50
                            : listView.contentWidth
                     //wrong content width
                }
            }
        }

        ListView{
            id: listView

            clip: true
            boundsBehavior: Flickable.StopAtBounds

            anchors.topMargin: 15
            anchors.left: leftButton.right
            anchors.right: rightButton.left
            anchors.top: root.top
            anchors.bottom: parent.bottom

            spacing: 5
            orientation: ListView.Horizontal

            model: root.imagesUrlModel
            delegate: imageDelegate
        }
    }
}

标签： qtqml

解决方案

在您的示例中，只需更改listView.contentWidth为listView.contentWidth-listView.widthin onClickedevent for rightButton。但这还不够。在listView.contentX+50更新. _ 在这种情况下，您需要更新和之间的差异。listView.contentWidth-listView.widthlistView.contentXlistView.contentXlistView.contentWidthlistView.width

这里是：

listView.contentX = listView.contentX+50 <= listView.contentWidth-listView.width
                            ? listView.contentX + 50
                            : listView.contentWidth - listView.width

推荐阅读