滚动时隐藏 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

据documentation报道：

注意：视图不会自动启用剪辑。如果视图没有被其他项目或屏幕剪辑，则需要设置 clip: true 以便很好地剪辑视图外的项目。

因此，您遇到的是一种常见行为，您应该 1) 通过其他 Items 剪辑视图（例如，标题 Rectangle 和页脚 Rectangle 与 z:infinite 或简单地设置 @ 987654327@属性转true，即

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

Clipping 有一些perfomance disavantages，随着应用程序的增长，它们会极大地影响应用程序。因此，应仔细评估其使用情况，尤其是在视图场景之外。