Header of ListView visible out of ListView

Sikarjan

Hi,

I am not sure if I did something wrong or if I found a bug. Currently I am using a ListView to display several items. The list is within a TabView and usually longer than the space within the tab so that you have to scroll to see to full list. While scrolling I noticed that the text disappears when it is already have over the top edge. The section headers I use only disappear if they are out of the program window. Is this behaviour on purpose or is this a bug? If it is on purpose, how can I force a break about three points within the TabView frame?

My code looks like this:

ListView {
      model: skillModel
      delegate: skillItem
      spacing: 3
      
      section.property: 'group'
      section.criteria: ViewSection.FullString
      section.delegate: sectionHeading
}

And the section heading looks like this:

Component {
      id: sectionHeading
      Rectangle {
            width: tabView.width
            height: childrenRect.height
            color: "lightsteelblue"

            Text {
                  text: section
                  font.bold: true
                  font.pixelSize: 18
                  x: 10
            }
      }
}

jpnurmi

Flickable and item views do not enable clip automatically. If the view is not clipped by another item or the screen, it will be necessary to set "clip: true" in order to have the out of view items clipped nicely.

Sikarjan

Thanks for the help. It is still not clipping where I want it to but it is okay now. Header and Text still overlap the Tab titles on OS X.

jpnurmi

@Sikarjan An item with "clip: true" clips to its own bounds. So manage the geometry of the ListView using anchors or x/y/width/height so that it clips where desired.