QML ListView :: contentWidth шире, чем фактический контент

Question

Попытка реализовать прокрутку содержимого ListView, нажав на кнопку. При прокрутке к концу представления содержимое ListView не останавливается в конце последнего изображения, которое он прокручивает. Ниже я привел минимальный рабочий пример, а также предварительный просмотр, что идет не так. Просто измените путь .img, чтобы он работал на вашем P C. Я искал некоторую помощь в источниках 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
        }
    }
}

Answer 1

В вашем примере просто измените listView.contentWidth на listView.contentWidth-listView.width в onClicked событие для rightButton. Но этого недостаточно. Вы должны проверить, не переполняет ли listView.contentX+50 listView.contentWidth-listView.width, прежде чем обновлять listView.contentX. В таком случае вам нужно обновить listView.contentX с разницей между listView.contentWidth и listView.width.

Вот оно:

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

Answer 2

Я использовал другой подход с repeater и scrollview, и он сработал!

import QtQuick 2.14
import QtQuick.Window 2.14

import QtQuick 2.7
import QtQuick.Controls 1.4
import QtQuick.Controls.Styles 1.4

Window {
    visible: true
    width: 1024
    height: 300

    Item {
        id: contentItem
        anchors.fill: parent


        Rectangle {
            id: rightButton

            anchors.top: contentItem.top
            anchors.bottom: contentItem.bottom
            anchors.rightMargin: 10
            anchors.right: contentItem.right

            color: "green"

            width: 25

            MouseArea {
                anchors.fill: parent

                onClicked: {
                    var allowedWidth = scrollView.flickableItem.contentWidth - scrollView.viewport.width

                    if(row.width < scrollView.viewport.width){
                        return
                    }

                    var offset = scrollView.flickableItem.contentX + 50

                    if(offset <= allowedWidth){
                        scrollView.flickableItem.contentX += 50
                    }
                    else {
                        scrollView.flickableItem.contentX = allowedWidth
                    }
                }
            }
        }

        ScrollView {
            id: scrollView
            anchors.left: contentItem.left
            anchors.right: rightButton.left
            anchors.top: contentItem.top
            anchors.bottom: contentItem.bottom

            clip: true

            verticalScrollBarPolicy: Qt.ScrollBarAlwaysOff
            horizontalScrollBarPolicy: Qt.ScrollBarAlwaysOff

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

            Row {
                id: row
                spacing: 15

                Repeater {
                    id: repeater
                    anchors.left: parent.left
                    anchors.right: parent.right
                    model: scrollView.imagesUrlModel
                    delegate: Component {
                        id: imageDelegate

                        Image {
                            id: image

                            sourceSize.height: 300

                            source: modelData
                            fillMode: Image.Stretch
                        }
                    }
                }
            }
        }
    }
}