如何使ListElement不脫離QML中的ListView？

Question

我需要一些幫助，我在QML中有以下代碼：

import QtQuick 2.9
import QtQuick.Window 2.3
import QtQuick.Layouts 1.3

Window {

    visible: true
    width: 500
    height: 500

    ListModel {

        id: modeloDeLista
        ListElement{
            nombre: "Articulo 1"
            precio: 5000
            descripcion: "Esto es una descripción"
        }

        ListElement{
            nombre: "Articulo 2"
            precio: 8000
            descripcion: "Esto es una descripción"
        }

        ListElement{
            nombre: "Articulo 3"
            precio: 6000
            descripcion: "Esto es una descripción"
        }
    }

    Component{

        id: vistaLista
        Rectangle{

            color: "#333"
            width: parent.parent.width
            height: 70

            RowLayout{
                Layout.fillWidth: true;
                Layout.fillHeight: true;

                Text {
                    text: qsTr("Nombre: "+nombre)
                    color: "#fff"
                    Layout.fillWidth: true;
                    Layout.fillHeight: true;
                }
                Text {
                    text: qsTr("Precio: "+precio)
                    color: "#fff"
                    Layout.fillWidth: true;
                    Layout.fillHeight: true;
                }
                Text {
                    text: qsTr("Descripcion: "+descripcion)
                    color: "#fff"
                    Layout.fillWidth: true;
                    Layout.fillHeight: true;
                }
            }
        }
    }

    Rectangle{
        id: contenedor
        color: "#ddd"
        anchors.centerIn: parent
        width: parent.width * 0.9
        height: parent.height * 0.9

        ListView {
            spacing: 10
            model: modeloDeLista
            delegate: vistaLista
            anchors.fill: parent
            highlightRangeMode: ItemView.NoHighlightRange
        }
    }

}

看起來像這樣：

但是當您使用鼠標移動時，會傳遞分配給您的灰色區域

我如何使它不會從那里出來？

我不得不提出這個問題，以允許我提出這個問題，因為顯然我的文字很少，而代碼卻更多，因此我可以忽略這一點。

編輯

我想保持效果但不關閉滾動條

編輯

它離開了容器

這就是我所需要的

我該怎么做？

Answer 1

如果要禁用過沖效果，如docs所示 ：

boundsBehavior：枚舉

此屬性保存是否可以將曲面拖動到Flickable的邊界之外，或者在滑動時超調Flickable的邊界。

這樣可以感覺到視圖的邊緣是柔軟的，而不是硬的物理邊界。

boundsBehavior可以是以下之一：

Flickable.StopAtBounds-無法將內容拖動到可滑動對象的邊界之外，並且不可以滑動。

Flickable.DragOverBounds-可以將內容拖動到Flickable的邊界之外，但輕拂不會過沖。

Flickable.OvershootBounds-輕拂時，內容可以超出邊界，但是內容不能拖動到輕拂的邊界之外。 （自QtQuick 2.5起）

Flickable.DragAndOvershootBounds （默認值）-內容可以拖動到Flickable的邊界之外，並且在輕拂時可以超出邊界。

在您的情況下：

ListView {
    [...]
    boundsBehavior: Flickable.StopAtBounds
}

---

更新：

在您的情況下，可以將Rectangle的clip屬性設置為true：

Rectangle{
    id: contenedor
    color: "#ddd"
    anchors.centerIn: parent
    width: parent.width * 0.9
    height: parent.height * 0.9
    clip:true

    ListView {
        id: list
        spacing: 10
        model: modeloDeLista
        delegate: vistaLista
        anchors.fill: parent
    }
}