QML ListView, 스크롤 할 때 머리글과 겹치지 않도록 목록 요소를 만드는 방법.

Question

헤더 위임이 활성화 된 ListView가 있습니다. "OverlayHeader"로 설정된 헤더 위치 지정 속성이 있습니다. 머리글은 요소를 스크롤 할 때 그대로 유지됩니다. 그러나 요소는 머리글과 겹칠 것입니다. 이것을 막을 수있는 방법이 있습니까? 당신이 대표 끝났어 수 있도록 더 높은 값으로 설정할 수 있습니다

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

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 
      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 그.