QML ListView，滚动时如何使列表元素不与 header 重叠

Question

我有启用了 header 委托的 ListView。我有一个 header 定位属性设置为 "OverlayHeader"。 header 将在滚动元素时保持原位。但是，元素将重叠 header。有没有办法防止这种情况。

列表元素与 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});
      }
  }
}

Answer 1

header's default z value is 1，所以你可以将它设置为更高的值以确保它超过了委托：

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

请注意 clipping view delegates is bad for performance。

QML ListView，滚动时如何使列表元素不与 header 重叠

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

qt

qml

qtquick2

qt-quick