QML-тип ColumnView

Создает экземпляры делегата в столбце по мере необходимости. Подробнее...

Строка импорта: import Sailfish.Silica 1.0
Наследуется от: Item

Свойства

Подробное описание

Тип ColumnView реализует представление в виде столбца, которое создает экземпляры делегата только по мере необходимости.

Данный тип функционально эквивалентен элементу QtQuick Repeater, который используется внутри Column для создания экземпляров делегата в соответствии с моделью. Однако тип ColumnView создает только отображаемые в данный момент экземпляры делегата. Внешний вид и поведение ColumnView такие же, как у комбинации Column/Repeater, однако делегаты создаются только в момент отображения. Поэтому он наиболее подходит для списков, выходящих за пределы одного экрана.

Данный тип полезно использовать при компоновке вида с прокруткой, состоящего из нескольких контейнеров типа Column, и при этом:

  • нет необходимости прокручивать каждый контейнер в родительском элементе;
  • нет необходимости для рендеринга каждый контейнер может содержать большое количество контента, или делегаты имеют сложную структуру,

Описанные выше сценарии встречаются сравнительно редко, поэтому вместо ColumnView предпочтительнее использовать тип SilicaListView или комбинацию Column/Repeater.

Ниже приведен пример, который демонстрирует преимущество использования ColumnView перед SilicaListView. Внутри SilicaFlickable находятся два дочерних представления ColumnView, модель каждого из которых будет содержать по 100 элементов после нажатия кнопки Button. ColumnView будет создавать и отображать только те экземпляры делегатов, которые в настоящее время видны на экране (или находятся в cacheBuffer), что значительно повысит производительность:

 import QtQuick 2.2
 import Sailfish.Silica 1.0

 ApplicationWindow {
     initialPage: Component {

         Page {
             SilicaFlickable {
                 anchors.fill: parent
                 contentHeight: mainColumn.height

                 Column {
                     id: mainColumn
                     width: parent.width

                     PageHeader {}

                     Button {
                         text: "Show search results"
                         anchors.horizontalCenter: parent.horizontalCenter
                         onClicked: {
                             console.log("Generating content...")
                             firstColumn.model = 100
                             secondColumn.model = 100
                             console.log("Done!")
                         }
                     }

                     SectionHeader { text: "Search results" }

                     ColumnView {
                         id: firstColumn
                         width: parent.width
                         itemHeight: Theme.itemSizeSmall

                         delegate: BackgroundItem {
                             width: parent.width
                             Label {
                                 text: "Search result " + model.index
                                 anchors.centerIn: parent
                             }
                         }
                     }

                     SectionHeader { text: "You might also like..."}

                     ColumnView {
                         id: secondColumn
                         width: parent.width
                         itemHeight: Theme.itemSizeSmall

                         delegate: BackgroundItem {
                             width: parent.width
                             Label {
                                 text: "Suggestion " + model.index
                                 anchors.centerIn: parent
                             }
                         }
                     }
                 }
             }
         }
     }
 }

Для корректной работы ColumnView следует свойству itemHeight присвоить значение высоты созданного экземпляра делегата.

Если для отображения содержимого вместо ColumnView использовать комбинацию Column/Repeater, то его отрисовка займет значительно больше времени, поскольку это потребует создания и отрисовки всех, а не только необходимых, экземпляров делегатов. Аналогичная ситуация при использовании SilicaListView. Чтобы обеспечить возможность прокручивать родительский объект полностью (от начала первого представления до конца второго представления), необходимо свойству height представления списка присвоить значение contentHeight. Но это приведет к тому, что все экземпляры делегатов представления будут создаваться сразу.

При наличии только одного представления в виде столбца, а не двух (как в примере), возможно вместо ColumnView использование SilicaListView. В этом случае объекты типа PageHeader и Button следует переместить в заголовок списка.

Описание свойств

cacheBuffer : int

Максимальное количество пикселей, которые будут кэшироваться за пределами видимой области в предварительно сгенерированных элементах делегата.

См. также cacheBuffer.

[read-only] count : int

Содержит значение, равное количеству элементов в модели ColumnView.

delegate : Component

Предоставляет шаблон для каждого элемента, созданного ColumnView.

itemHeight : real

По умолчанию высота элементов, которые будут созданы ColumnView. Значение данного свойства необходимо для вычисления высоты содержимого столбца.

maximumVisibleHeight : real

Максимальная высота элемента списка, отображаемого в определенный момент времени, которая по умолчанию соответствует высоте экрана Screen.height.

model : var

Предоставляет список элементов, которые будут созданы ColumnView.