滚动时隐藏ListView的突出显示

Question

我正在为UI构建基于Qt-Quick 2的Qt5应用程序。显示带有突出显示组件的ListView时出现问题。当我滚动ListView时，突出显示的矩形在ListView之外可见，我找不到避免它的方法。

这是一个带有最小QML文件的问题的示例：

import QtQuick 2.0

Rectangle {
    width: 360; height: 600

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

    delegate: Item {
      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});
      }
  }
}

有没有一种方法可以将组件“限制”在其父边框或在滚动时隐藏突出显示的组件？

Answer 1

As reported by the documentation:

Note: 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.

Hence, what you are experiencing is a common behaviour and you should either 1) clip the view via other Items (e.g. a header Rectangle and a footer Rectangle with z:infinite or simply set the clip property to true, i.e.

ListView{
   //...
   clip:true
   //...
}

Clipping has some perfomance disavantages which can greatly affect the application as it grows. Hence, its usage, especially outside the views scenario, should be evaluated carefully.