QML ListView, Как сделать элементы списка не перекрывать заголовок при прокрутке.

Question

У меня есть ListView с включенным делегатом заголовка. У меня есть свойство позиционирования заголовка, установленное в «OverlayHeader». При прокрутке элементов заголовок будет оставаться на месте. Однако элементы перекрывают заголовок. Есть ли способ предотвратить это.

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

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.