QML ListView, How to make list elements to not overlap the header, when scrolling

Question

I have ListView with a header delegate enabled. I have a header positioning property set to "OverlayHeader". The header will stay in place when scrolling through the elements. However, the elements will overlap the header. Is there a way to prevent this.

Example of list elements overlapping the header.

import QtQuick 2.5

Rectangle {
    width: 360; height: 600

  ListView {

    width: 350; height: 200
    anchors.centerIn: parent
    id: myList
    model: myModel
    highlight: highlightBar
    clip: true

    snapMode: ListView.SnapToItem

    headerPositioning: ListView.OverlayHeader

    header: Rectangle {
      id: headerItem
      width: myList.width
      height:50

      color: "blue"

      Text {
        text: "HEADER"
        color: "red"
      }
    }

    delegate: Item {
      id: delegateItem
      width: 400; height: 20
      clip: true
      Text { text: name
      }

      MouseArea {
        id: mArea
        anchors.fill: parent
        onClicked: { myList.currentIndex = index; }
      }
    }

  }

  Component {
    id: highlightBar
    Rectangle {
      width: parent.width; height: 20
      color: "#FFFF88"
    }
  }

  ListModel {
      id: myModel
  }

  /* Fill the model with default values on startup */
  Component.onCompleted: {
      for(var i = 0; i < 100; i++) {
          myModel.append({ name: "Big Animal : " + i});
      }
  }
}

score 13 · Accepted Answer · answered Sep 08 '16 at 06:00

The header's default z value is 1, so you can set it to a higher value to ensure that it's over the delegates:

import QtQuick 2.5

Rectangle {
    width: 360
    height: 600

    ListView {

        width: 350
        height: 200
        anchors.centerIn: parent
        id: myList
        model: myModel
        highlight: highlightBar
        clip: true

        snapMode: ListView.SnapToItem

        headerPositioning: ListView.OverlayHeader

        header: Rectangle {
            id: headerItem
            width: myList.width
            height: 50
            z: 2

            color: "blue"

            Text {
                text: "HEADER"
                color: "red"
            }
        }

        delegate: Item {
            id: delegateItem
            width: 400
            height: 20
            Text {
                text: name
            }

            MouseArea {
                id: mArea
                anchors.fill: parent
                onClicked: {
                    myList.currentIndex = index
                }
            }
        }
    }

    Component {
        id: highlightBar
        Rectangle {
            width: parent.width
            height: 20
            color: "#FFFF88"
        }
    }

    ListModel {
        id: myModel
    }

    /* Fill the model with default values on startup */
    Component.onCompleted: {
        for (var i = 0; i < 100; i++) {
            myModel.append({
                name: "Big Animal : " + i
            })
        }
    }
}

Note that clipping view delegates is bad for performance.

Thank You. I have been banging my head over this. I was trying everything. I even put clipping every where. Now I can remove clipping where I do not need it. — EnriqueH73, Sep 08 '16 at 14:14
I tried this approach and it worked until I decided to make my header not a filled rectangle. I want my header to have some widgets (checkbox, images, etc.) with a transparent background and even with a high z and clipping the ListView the items keep overflowing the header....does someone have a solution? — Javier De Pedro, Jul 09 '19 at 08:17
@JavierDePedro make header - separate `Item` or `Rect` above `ListView` - move outside `ListView` - that is all :) — Aleksey Kontsevich, Nov 04 '19 at 02:42
You mentioned clipping is bad for performance, and I think I am experiencing some sluggishness because of clipping. What can one do to overcome this without removing the clipping behavior? — Evan Krause, Sep 27 '21 at 16:35
@EvanKrause first you should profile your application and make sure you're certain what's causing the performance issues. — Mitch, Sep 29 '21 at 09:01

QML ListView, How to make list elements to not overlap the header, when scrolling

1 Answers1