How do I make the ListElement not get out of the ListView in QML?

Question

I need some help, i have the following code in 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
        }
    }

}

this looks like this:

but when you move with the mouse, you pass the gray area that is assigned to you

How do I make it so that it does not get out of there?

I had to put this to allow me to ask the question, because apparently I had little text and more code, so I can ignore this.

Edit

I want to keep the effect but without turning off the scroll

Edit

Here it leaves the container

This is what I need

How do i do it?

Answer 1

If you want to disable the overshoot effect, as indicated by the docs:

boundsBehavior : enumeration

This property holds whether the surface may be dragged beyond the Flickable's boundaries, or overshoot the Flickable's boundaries when flicked.

This enables the feeling that the edges of the view are soft, rather than a hard physical boundary.

The boundsBehavior can be one of:

Flickable.StopAtBounds - the contents can not be dragged beyond the boundary of the flickable, and flicks will not overshoot.

Flickable.DragOverBounds - the contents can be dragged beyond the boundary of the Flickable, but flicks will not overshoot.

Flickable.OvershootBounds - the contents can overshoot the boundary when flicked, but the content cannot be dragged beyond the boundary of the flickable. (since QtQuick 2.5)

Flickable.DragAndOvershootBounds (default) - the contents can be dragged beyond the boundary of the Flickable, and can overshoot the boundary when flicked.

In your case:

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

---

Update:

You can set the clip property of the Rectangle to true, in your case:

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