QML-тип ColumnView

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

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

• Список всех членов класса, включая унаследованные

Свойства

• cacheBuffer : int
• count : int
• delegate : Component
• itemHeight : real
• maximumVisibleHeight : real
• model : var

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

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

Данный тип функционально эквивалентен элементу 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: "Показать результаты поиска"
                        anchors.horizontalCenter: parent.horizontalCenter
                        onClicked: {
                            console.log("Генерация содержимого...")
                            firstColumn.model = 100
                            secondColumn.model = 100
                            console.log("Done!")
                        }
                    }

                    SectionHeader { text: "Результаты поиска" }

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

                        delegate: BackgroundItem {
                            width: parent.width
                            Label {
                                text: "Поиск результата " + model.index
                                anchors.centerIn: parent
                            }
                        }
                    }

                    SectionHeader { text: "Вам также может понравиться..."}

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

                        delegate: BackgroundItem {
                            width: parent.width
                            Label {
                                text: "Предложение " + 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.