Скрыть выделение ListView при прокрутке

Question

Я создаю приложение Qt5 на основе Qt-Quick 2 для пользовательского интерфейса. У меня есть проблема при отображении 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

Как указано в документации:

Примечание. Представления не включают клип автоматически. Если представление не обрезается другим элементом или экраном, необходимо будет установить clip: true, чтобы элементы внешнего вида были аккуратно обрезаны.

Следовательно, то, что вы испытываете, является обычным поведением, и вы должны либо: 1) обрезать вид с помощью другого Items (например, заголовок Rectangle и нижний колонтитул Rectangle с z:infinite или просто установить clip собственность на trueт.е.

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

Отсечение имеет некоторые недостатки производительности, которые могут сильно повлиять на приложение по мере его роста. Следовательно, его использование, особенно вне сценария представлений, должно быть тщательно оценено.