I want to create a scrollable ListView or tableView for a QT / QML Touchscreen Application

Question

I'm going to write a touchscreen application that has a movable listView control. Currently my problem is that the content comes out of the view, if the content is longer/highter than the listView itself when I try to scroll.

This is my current code. I need a solution only to scroll within the listview and not to overflow its border.

ListModel {
        id: listModle
        ListElement {
            name: "Bill Smith"
            number: "555 3264"
        }
        ListElement {
            name: "John Brown"
            number: "555 8426"
        }
        ListElement {
            name: "Sam Wise"
            number: "555 0473"
        }
        ListElement {
            name: "Bill Smith"
            number: "555 3264"
        }
        ListElement {
            name: "John Brown"
            number: "555 8426"
        }
        ListElement {
            name: "Sam Wise"
            number: "555 0473"
        }
    }

    Rectangle {
        x: 100
        y: 100
         width: 180; height: 200

         Component {
             id: contactDelegate
             Item {
                 width: 180; height: 40
                 Column {
                     Text { text: '<b>Name:</b> ' + name }
                     Text { text: '<b>Number:</b> ' + number }
                 }
             }
         }

         ListView {
             id: listView
             anchors.fill: parent
             model: listModle
             delegate: contactDelegate
             //highlight: Rectangle { color: "lightsteelblue"; radius: 5 }
             focus: true
             contentHeight: 150


         }


     }

Answer 1

listView exceedes the Rectangle parent because there are too many elements to display.

That's perfectly fine, you simply have to turn clip: true on your Rectangle object. That way, the content of your list will be visible only from the Rectangle viewport.

Edit (pro-tip): if the listview height is less than the enclosing parent Rectangle, for usability concerns you should disable the scroll behavior. Look at Qml Flickable API(especially interactive and contentWidth/Height ) to perform some simple check ;)