Тип QML GridView

Для указания сетки отображения элементов, предоставляемых моделью Подробнее...

Заявление импорта:	import QtQuick 2.5
Наследует:	Flickable

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

Свойства

add : Переход
addDisplaced : Переход
cacheBuffer : int
cellHeight : real
cellWidth : real
count : int
currentIndex : int
currentItem : Элемент
delegate : Компонент
displaced : Переход
displayMarginBeginning : int
displayMarginEnd : int
effectiveLayoutDirection : перечисление
flow : перечисление
footer : Компонент
footerItem : Элемент
header : Компонент
headerItem : Элемент
highlight : Компонент
highlightFollowsCurrentItem : bool
highlightItem : Элемент
highlightMoveDuration : int
highlightRangeMode : перечисление
keyNavigationWraps : bool
layoutDirection : перечисление
model : модель
move : Переход
moveDisplaced : Переход
populate : Переход
preferredHighlightBegin : real
preferredHighlightEnd : real
remove : Переход
removeDisplaced : Переход
snapMode : перечисление
verticalLayoutDirection : перечисление

Присоединенные свойства

delayRemove : bool
isCurrentItem : bool
view : GridView

Присоединенные сигналы

add()
remove()

Методы

forceLayout()
int indexAt(real x, real y)
Элемент itemAt(real x, real y)
moveCurrentIndexDown()
moveCurrentIndexLeft()
moveCurrentIndexRight()
moveCurrentIndexUp()
positionViewAtBeginning()
positionViewAtEnd()
positionViewAtIndex(int index, PositionMode mode)

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

A GridView отображает данные из моделей, созданных из встроенных типов QML, таких как ListModel и XmlListModel, или пользовательских классов моделей, определенных в C++, которые наследуют от QAbstractListModel.

A GridView имеет model, который определяет отображаемые данные, и delegate, который определяет, как следует отображать данные. Элементы в GridView выстраиваются по горизонтали или вертикали. GridView по своей сути является flickable, так как GridView наследует от Flickable.

Пример использования

Следующий пример демонстрирует определение простой модели списка, определенной в файле с именем ContactModel.qml.

import QtQuick 2.0

ListModel {

    ListElement {
        name: "Jim Williams"
        portrait: "pics/portrait.png"
    }
    ListElement {
        name: "John Brown"
        portrait: "pics/portrait.png"
    }
    ListElement {
        name: "Bill Smyth"
        portrait: "pics/portrait.png"
    }
    ListElement {
        name: "Sam Wise"
        portrait: "pics/portrait.png"
    }
}

Эту модель можно использовать в других файлах QML как ContactModel. Подробнее о создании таких повторно используемых компонентов см. в разделе QML Модули.

Другой компонент может отображать эти данные модели в GridView, как показано в следующем примере, который создаёт компонент ContactModel для своей модели и Column (содержащий Image и Text элементы) для своего делегата.

import QtQuick 2.0

GridView {
    width: 300; height: 200

    model: ContactModel {}
    delegate: Column {
        Image { source: portrait; anchors.horizontalCenter: parent.horizontalCenter }
        Text { text: name; anchors.horizontalCenter: parent.horizontalCenter }
    }
}

Просмотр создаст новый делегат для каждого элемента в модели. Обратите внимание, что делегат может напрямую получить доступ к данным модели name и portrait.

Ниже показан улучшенный просмотр сетки. Делегат визуально улучшен и перемещен в отдельный компонент contactDelegate.

Rectangle {
    width: 300; height: 200

    Component {
        id: contactDelegate
        Item {
            width: grid.cellWidth; height: grid.cellHeight
            Column {
                anchors.fill: parent
                Image { source: portrait; anchors.horizontalCenter: parent.horizontalCenter }
                Text { text: name; anchors.horizontalCenter: parent.horizontalCenter }
            }
        }
    }

    GridView {
        id: grid
        anchors.fill: parent
        cellWidth: 80; cellHeight: 80

        model: ContactModel {}
        delegate: contactDelegate
        highlight: Rectangle { color: "lightsteelblue"; radius: 5 }
        focus: true
    }
}

Текущий выбранный элемент выделяется синим прямоугольником Rectangle с помощью свойства highlight, а focus устанавливается в true, чтобы включить навигацию с клавиатуры для просмотра сетки. Сам просмотр сетки является областью фокуса (подробнее см. Фокус клавиатуры в Qt Quick).

Делегаты создаются по мере необходимости и могут быть уничтожены в любое время. Состояние никогда не должно храниться в делегате.

GridView прикрепляет ряд свойств к корневому элементу делегата, например GridView.isCurrentItem. В следующем примере корневой элемент делегата может напрямую получить доступ к этому присоединённому свойству как GridView.isCurrentItem, в то время как дочерний объект contactInfo должен ссылаться на это свойство как wrapper.GridView.isCurrentItem.

GridView {
    width: 300; height: 200
    cellWidth: 80; cellHeight: 80

    Component {
        id: contactsDelegate
        Rectangle {
            id: wrapper
            width: 80
            height: 80
            color: GridView.isCurrentItem ? "black" : "red"
            Text {
                id: contactInfo
                text: name + ": " + number
                color: wrapper.GridView.isCurrentItem ? "red" : "black"
            }
        }
    }

    model: ContactModel {}
    delegate: contactsDelegate
    focus: true
}

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

Макеты GridView

Макет элементов в GridView можно контролировать с помощью этих свойств:

flow - определяет, текут ли элементы слева направо (как ряд строк) или сверху вниз (как ряд столбцов). Это значение может быть либо GridView.FlowLeftToRight, либо GridView.FlowTopToBottom.
layoutDirection - определяет направление горизонтального макета: то есть выстраиваются ли элементы от левой стороны просмотра к правой или наоборот. Это значение может быть либо Qt.LeftToRight, либо Qt.RightToLeft.
verticalLayoutDirection - определяет направление вертикального макета: то есть выстраиваются ли элементы сверху вниз от верхней части просмотра к нижней или наоборот. Это значение может быть либо GridView.TopToBottom, либо GridView.BottomToTop.

По умолчанию, GridView течёт слева направо, а элементы выстраиваются слева направо по горизонтали и сверху вниз по вертикали.

Эти свойства можно комбинировать для создания различных макетов, как показано в таблице ниже. GridView в первой строке все имеют значение flow GridView.FlowLeftToRight, но используют разные комбинации горизонтальных и вертикальных направлений макета (указанных соответственно свойствами layoutDirection и verticalLayoutDirection). Аналогично, GridView во второй строке ниже все имеют значение flow GridView.FlowTopToBottom, но используют разные комбинации горизонтальных и вертикальных направлений макета, чтобы выводить свои элементы различными способами.

GridView с потоком GridView.FlowLeftToRight
(Г) Слева направо (В) Сверху вниз	(Г) Справа налево (В) Сверху вниз	(Г) Слева направо (В) Снизу вверх	(Г) Справа налево (В) Снизу вверх
GridView с потоком GridView.FlowTopToBottom
(Г) Слева направо (В) Сверху вниз	(Г) Справа налево (В) Сверху вниз	(Г) Слева направо (В) Снизу вверх	(Г) Справа налево (В) Снизу вверх

См. также QML Модели данных, ListView, PathView и Примеры Qt Quick - Виды.

Документация свойств

add : Transition

Это свойство содержит переход, который нужно применить к элементам, добавляемым в представление.

Например, вот представление, которое задает такой переход:

GridView {
    ...
    add: Transition {
        NumberAnimation { properties: "x,y"; from: 100; duration: 1000 }
    }
}

Всякий раз, когда элемент добавляется в указанное выше представление, элемент будет анимироваться от позиции (100,100) до своей конечной позиции x,y в представлении в течение одной секунды. Переход применяется только к новым элементам, добавляемым в представление; он не применяется к элементам, смещенным из-за добавления новых элементов. Чтобы анимировать смещенные элементы, установите свойства displaced или addDisplaced.

Дополнительные сведения и примеры использования переходов представления см. в документации ViewTransition.

Примечание: Этот переход не применяется к элементам, созданным при первоначальной загрузке представления или при изменении модели представления model. (В этих случаях применяется переход populate.) Кроме того, этот переход не должен анимировать высоту нового элемента; это приведет к неправильному расположению элементов под новым элементом. Вместо этого высоту можно анимировать в обработчике onAdd в делегате.

См. также addDisplaced, populate и ViewTransition.

addDisplaced : Transition

Это свойство содержит переход, который нужно применить к элементам внутри представления, которые смещаются при добавлении других элементов в представление.

Например, вот представление, которое задает такой переход:

GridView {
    ...
    addDisplaced: Transition {
        NumberAnimation { properties: "x,y"; duration: 1000 }
    }
}

Всякий раз, когда элемент добавляется в вышеупомянутое представление, все элементы под новым элементом смещаются, что приводит к их перемещению вниз (или вбок, если ориентация горизонтальная) в представлении. При этом перемещении движение элементов к новым позициям x,y в представлении будет анимироваться с помощью NumberAnimation в течение одной секунды, как указано. Этот переход не применяется к новому элементу, который был добавлен в представление; для анимации добавленных элементов установите свойство add.

Если элемент смещается из-за нескольких операций одновременно, не определено, будет ли применён переход addDisplaced, moveDisplaced или removeDisplaced. Кроме того, если нет необходимости задавать разные переходы в зависимости от того, смещается ли элемент из-за операции добавления, перемещения или удаления, можно установить свойство displaced вместо этого.

Дополнительные сведения и примеры использования переходов представления см. в документации ViewTransition.

Примечание: Этот переход не применяется к элементам, созданным при первоначальной загрузке представления или при изменении модели представления model. В этих случаях применяется переход populate.

См. также displaced, add, populate и ViewTransition.

cacheBuffer : int

Это свойство определяет, сохраняются ли делегаты за пределами видимой области представления.

Если это значение больше нуля, представление может сохранять столько делегатов, сколько поместится в указанный буфер. Например, если в вертикальном представлении размер делегата составляет 20 пикселей, есть 3 столбца и cacheBuffer установлено в 40, то может быть создано/сохранено до 6 делегатов над и 6 делегатов под видимой областью. Буферизованные делегаты создаются асинхронно, позволяя создание происходить на нескольких кадрах и уменьшая вероятность пропусков кадров. Для улучшения производительности отрисовки делегаты за пределами видимой области не отрисовываются.

Значение по умолчанию этого свойства зависит от платформы, но обычно будет значением, большим нуля. Отрицательные значения игнорируются.

Обратите внимание, что cacheBuffer - это не буфер пикселей; он просто сохраняет дополнительные созданные делегаты.

Примечание: Установка этого свойства не является заменой для создания эффективных делегатов. Оно может улучшить плавность поведения прокрутки за счет увеличения использования памяти. Чем меньше объектов и связей в делегате, тем быстрее можно прокручивать представление. Важно понимать, что установка cacheBuffer только отсрочит проблемы, вызванные медленным загрузкой делегатов, это не решение для этой ситуации.

cacheBuffer работает вне любых отступов отображения, заданных displayMarginBeginning или displayMarginEnd.

cellHeight : real

Эти свойства содержат ширину и высоту каждого ячейки в сетке.

Размер ячейки по умолчанию составляет 100x100.

cellWidth : real

Эти свойства содержат ширину и высоту каждого ячейки в сетке.

Размер ячейки по умолчанию составляет 100x100.

count : int

Это свойство содержит количество элементов в представлении.

currentIndex : int

Свойство currentIndex содержит индекс текущего элемента, а currentItem содержит текущий элемент. Установка currentIndex в -1 очистит выделение и установит currentItem в null.

Если highlightFollowsCurrentItem true, установка любого из этих свойств плавно прокрутит GridView так, чтобы текущий элемент стал видимым.

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

currentItem : Item

delegate : Component

Делегат предоставляет шаблон, определяющий каждый элемент, создаваемый представлением. Индекс доступен как свойство index. Свойства модели также доступны в зависимости от типа модели данных.

Количество объектов и связей в делегате оказывает непосредственное влияние на производительность прокрутки представления. Если это возможно, размещайте функциональность, которая не нужна для обычного отображения делегата, в Loader, который может загружать дополнительные компоненты при необходимости.

Размер элемента GridView определяется свойствами cellHeight и cellWidth. Он не будет изменять размер элементов на основе размера корневого элемента в делегате.

По умолчанию порядок следования делегатов по z-индексу равен 1.

Примечание: Делегаты создаются по мере необходимости и могут быть уничтожены в любое время. Состояние никогда не должно храниться в делегате.

displaced : Transition

Это свойство содержит общий переход, который должен применяться к элементам, смещенным любой операцией модели, влияющей на представление.

Это удобство для указания общего перехода для элементов, которые смещены операциями добавления, перемещения или удаления, без необходимости указывать отдельные свойства addDisplaced, moveDisplaced и removeDisplaced. Например, вот представление, которое задает переход для смещенных элементов:

GridView {
    ...
    displaced: Transition {
        NumberAnimation { properties: "x,y"; duration: 1000 }
    }
}

Когда любой элемент добавляется, перемещается или удаляется в представлении выше, элементы под ним смещаются, что заставляет их перемещаться вниз (или вбок, если ориентация горизонтальная) в представлении. Во время этого смещения перемещение элементов в новые координаты x, y в представлении будет анимировано с помощью NumberAnimation в течение одной секунды, как указано.

Если представление задает этот общий переход для смещенных элементов, а также специфический переход addDisplaced, moveDisplaced или removeDisplaced, то более специфический переход будет использован вместо общего перехода при соответствующей операции, при условии, что более специфический переход не был отключен (установкой enabled в ложь). Если он отключен, применяется общий переход для смещения.

Дополнительную информацию и примеры использования переходов представлений см. в документации ViewTransition.

См. также addDisplaced, moveDisplaced, removeDisplaced и ViewTransition.

displayMarginBeginning : int

Это свойство позволяет делегатам отображаться за пределами геометрии представления.

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

Например, если в вертикальном представлении делегат имеет высоту 20 пикселей, есть 3 столбца, а displayMarginBeginning и displayMarginEnd оба установлены в 40, то будут созданы и показаны 6 делегатов сверху и 6 делегатов снизу.

Значение по умолчанию — 0.

Это свойство предназначено для поддержки определённых конфигураций пользовательского интерфейса, а не для повышения производительности. Если вам необходимо создавать делегатов за пределами геометрии представления для повышения производительности, вы, вероятно, захотите использовать свойство cacheBuffer вместо этого.

Это свойство QML было добавлено в QtQuick 2.3.

displayMarginEnd : int

Это свойство позволяет делегатам отображаться за пределами геометрии представления.

Значение по умолчанию — 0.

Это свойство QML было добавлено в QtQuick 2.3.

effectiveLayoutDirection : enumeration

Это свойство содержит эффективное направление макета сетки.

При использовании присоединённого свойства LayoutMirroring::enabled для локалей макет представления сетки будет зеркальным. Однако свойство layoutDirection останется неизменным.

См. также GridView::layoutDirection и LayoutMirroring.

flow : enumeration

Это свойство содержит направление потока сетки.

Возможные значения:

GridView.FlowLeftToRight (по умолчанию) - Элементы выстраиваются слева направо, и представление прокручивается вертикально
GridView.FlowTopToBottom - Элементы выстраиваются сверху вниз, и представление прокручивается горизонтально

Это свойство содержит компонент, который необходимо использовать в качестве подвала.

Экземпляр компонента подвала создаётся для каждого представления. Подвал размещается в конце представления, после всех элементов. По умолчанию порядок отображения подвала — 1.

См. также header и footerItem.

footerItem : Item

Это содержит элемент подвала, созданный из компонента footer.

См. также footer и headerItem.

header : Component

Это свойство содержит компонент, который необходимо использовать в качестве заголовка.

Экземпляр компонента заголовка создаётся для каждого представления. Заголовок размещается в начале представления, перед всеми элементами. По умолчанию порядок отображения заголовка — 1.

См. также footer и headerItem.

headerItem : Item

Это содержит элемент заголовка, созданный из компонента header.

См. также header и footerItem.

highlight : Component

Это свойство содержит компонент, который необходимо использовать в качестве выделения.

Экземпляр компонента выделения создаётся для каждого представления. Геометрия созданного экземпляра компонента будет управляться представлением таким образом, чтобы оставаться с текущим элементом, за исключением случаев, когда свойство highlightFollowsCurrentItem имеет значение false. По умолчанию порядок отображения элемента выделения — 0.

См. также highlightItem и highlightFollowsCurrentItem.

highlightFollowsCurrentItem : bool

Это свойство задаёт, управляется ли выделение представлением.

Если это свойство имеет значение true (по умолчанию), выделение плавно перемещается, чтобы следовать за текущим элементом. В противном случае выделение не перемещается представлением, и любое перемещение должно быть реализовано в элементе выделения.

Вот выделение с его движением, определённым элементом SpringAnimation:

Component {
    id: highlight
    Rectangle {
        width: view.cellWidth; height: view.cellHeight
        color: "lightsteelblue"; radius: 5
        x: view.currentItem.x
        y: view.currentItem.y
        Behavior on x { SpringAnimation { spring: 3; damping: 0.2 } }
        Behavior on y { SpringAnimation { spring: 3; damping: 0.2 } }
    }
}

GridView {
    id: view
    width: 300; height: 200
    cellWidth: 80; cellHeight: 80

    model: ContactModel {}
    delegate: Column {
        Image { source: portrait; anchors.horizontalCenter: parent.horizontalCenter }
        Text { text: name; anchors.horizontalCenter: parent.horizontalCenter }
    }

    highlight: highlight
    highlightFollowsCurrentItem: false
    focus: true
}

highlightItem : Item

Это содержит элемент выделения, созданный из компонента highlight.

highlightItem управляется представлением, если highlightFollowsCurrentItem не равен false. По умолчанию порядок отображения элемента выделения — 0.

См. также highlight и highlightFollowsCurrentItem.

highlightMoveDuration : int

Это свойство содержит продолжительность анимации перемещения выделенного делегата.

highlightFollowsCurrentItem должно быть true для действия этого свойства.

Значение по умолчанию для продолжительности — 150 мс.

См. также highlightFollowsCurrentItem.

highlightRangeMode : enumeration

Эти свойства определяют предпочтительный диапазон выделения (для текущего элемента) в представлении. Значение preferredHighlightBegin должно быть меньше значения preferredHighlightEnd.

Эти свойства влияют на позицию текущего элемента при прокрутке представления. Например, если выбранный элемент должен оставаться посередине представления при его прокрутке, установите значения preferredHighlightBegin и preferredHighlightEnd на координаты верхней и нижней границ, где находился бы средний элемент. Если значение currentItem изменено программно, представление автоматически прокрутится, чтобы текущий элемент находился в середине представления. Кроме того, поведение текущего индекса элемента произойдёт независимо от наличия выделения.

Допустимые значения для highlightRangeMode:

GridView.ApplyRange - представление пытается сохранить выделение в пределах диапазона. Однако выделение может выйти за пределы диапазона на концах представления или из-за взаимодействия с мышкой.
GridView.StrictlyEnforceRange - выделение никогда не выходит за пределы диапазона. Текущий элемент изменяется, если действие с клавиатуры или мыши привело бы к выходу выделения за пределы диапазона.
GridView.NoHighlightRange - это значение по умолчанию.

keyNavigationWraps : bool

Это свойство содержит значение, указывающее, происходит ли перенос навигации по клавишам.

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

По умолчанию перенос навигации по клавишам отключен.

layoutDirection : перечисление

Это свойство содержит направление вывода сетки.

Возможные значения:

Qt.LeftToRight (по умолчанию) - элементы будут выводиться, начиная с верхнего левого угла. Поток зависит от свойства GridView::flow.
Qt.RightToLeft - элементы будут выводиться, начиная с верхнего правого угла. Поток зависит от свойства GridView::flow.

Примечание: Если GridView::flow установлено в GridView.FlowLeftToRight, это не следует путать с ситуацией, когда GridView::layoutDirection установлено в Qt.RightToLeft. Значение потока GridView.FlowLeftToRight просто указывает, что поток горизонтальный.

См. также GridView::effectiveLayoutDirection и GridView::verticalLayoutDirection.

model : model

Это свойство содержит модель, предоставляющую данные для сетки.

Модель предоставляет набор данных, который используется для создания элементов в представлении. Модели могут быть созданы непосредственно в QML с помощью ListModel, XmlListModel или VisualItemModel, или предоставлены классами моделей C++. Если используется класс модели C++, он должен быть подклассом QAbstractItemModel или простым списком.

См. также Модели данных.

move : Transition

Это свойство содержит переход, который необходимо применить к элементам в представлении, которые перемещаются из-за операции перемещения в model представления.

Например, вот представление, в котором задан такой переход:

GridView {
    ...
    move: Transition {
        NumberAnimation { properties: "x,y"; duration: 1000 }
    }
}

Всякий раз, когда model выполняет операцию перемещения для перемещения определенного набора индексов, соответствующие элементы в представлении будут анимированы до своих новых позиций в представлении в течение одной секунды. Переход применяется только к элементам, которые являются объектом операции перемещения в модели; он не применяется к элементам ниже них, которые смещены операцией перемещения. Чтобы анимировать смещенные элементы, задайте свойства displaced или moveDisplaced.

Дополнительные сведения и примеры использования переходов представления см. в документации ViewTransition.

См. также moveDisplaced и ViewTransition.

moveDisplaced : Transition

Это свойство содержит переход, который необходимо применить к элементам, смещенным операцией перемещения в model представления.

Например, вот представление, в котором задан такой переход:

GridView {
    ...
    moveDisplaced: Transition {
        NumberAnimation { properties: "x,y"; duration: 1000 }
    }
}

Всякий раз, когда model выполняет операцию перемещения для перемещения определенного набора индексов, элементы между исходными и целевыми индексами операции перемещения смещаются, вызывая их перемещение вверх или вниз (или вбок, если ориентация горизонтальная) в представлении. При этом перемещении движение элементов к их новым позициям x, y в представлении будет анимировано с помощью NumberAnimation в течение одной секунды, как указано. Этот переход не применяется к элементам, которые фактически являются предметом операции перемещения; чтобы анимировать перемещенные элементы, задайте свойство move.

Если элемент смещается несколькими типами операций одновременно, не определено, будет ли применен переход addDisplaced, moveDisplaced или removeDisplaced. Кроме того, если не нужно указывать разные переходы в зависимости от того, смещен ли элемент добавлением, перемещением или удалением, можно задать свойство displaced вместо этого.

Дополнительные сведения и примеры использования переходов представления см. в документации ViewTransition.

См. также displaced, move и ViewTransition.

populate : Transition

Это свойство содержит переход, который необходимо применить к элементам, которые изначально создаются для представления.

Он применяется ко всем элементам, которые создаются при:

Первоначальном создании представления
Изменении модели представления model
Переустановке модели представления model, если модель является подклассом QAbstractItemModel

Например, вот представление, в котором задан такой переход:

GridView {
    ...
    populate: Transition {
        NumberAnimation { properties: "x,y"; duration: 1000 }
    }
}

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

Дополнительные сведения и примеры использования переходов представления см. в документации ViewTransition.

См. также add и ViewTransition.

preferredHighlightBegin : real

Эти свойства влияют на позицию текущего элемента при прокрутке представления. Например, если текущий выбранный элемент должен оставаться посередине представления при прокрутке, установите значения preferredHighlightBegin и preferredHighlightEnd в координаты верха и низа, где находился бы средний элемент. Если currentItem изменено программно, представление автоматически прокрутится, чтобы текущий элемент находился посередине представления. Более того, поведение текущего индекса элемента произойдёт как с выделением, так и без него.

Допустимые значения для highlightRangeMode:

GridView.ApplyRange - представление пытается сохранить выделение в пределах диапазона. Однако выделение может выйти за пределы диапазона на концах представления или из-за взаимодействия с мышкой.
GridView.StrictlyEnforceRange - выделение никогда не выходит за пределы диапазона. Текущий элемент изменяется, если действие с клавиатуры или мыши привело бы к выходу выделения за пределы диапазона.
GridView.NoHighlightRange - это значение по умолчанию.

preferredHighlightEnd : real

Допустимые значения для highlightRangeMode:

GridView.ApplyRange - представление пытается сохранить выделение в пределах диапазона. Однако выделение может выйти за пределы диапазона на концах представления или из-за взаимодействия с мышкой.
GridView.StrictlyEnforceRange - выделение никогда не выходит за пределы диапазона. Текущий элемент изменяется, если действие с клавиатуры или мыши привело бы к выходу выделения за пределы диапазона.
GridView.NoHighlightRange - это значение по умолчанию.

remove : Transition

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

Например, вот представление, в котором задан такой переход:

GridView {
    ...
    remove: Transition {
        ParallelAnimation {
            NumberAnimation { property: "opacity"; to: 0; duration: 1000 }
            NumberAnimation { properties: "x,y"; to: 100; duration: 1000 }
        }
    }
}

Всякий раз, когда элемент удаляется из представления выше, элемент будет анимирован в позицию (100,100) в течение одной секунды, а параллельно его непрозрачность изменится на 0. Переход применяется только к элементам, удаляемым из представления; он не применяется к элементам ниже них, которые смещаются при удалении элементов. Чтобы анимировать смещенные элементы, задайте свойства displaced или removeDisplaced.

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

Кроме того, если для элемента-делегата установлено присоединенное свойство delayRemove, переход удаления не будет применен, пока delayRemove снова не станет ложным.

Для получения более подробной информации и примеров использования переходов представления см. документацию по ViewTransition.

См. также removeDisplaced и ViewTransition.

removeDisplaced : Transition

Это свойство содержит переход, который нужно применить к элементам в представлении, смещенным из-за удаления других элементов в представлении.

Например, вот представление, которое задает такой переход:

GridView {
    ...
    removeDisplaced: Transition {
        NumberAnimation { properties: "x,y"; duration: 1000 }
    }
}

Всякий раз, когда элемент удаляется из приведенного выше представления, все элементы под ним смещаются, что приводит к их перемещению вверх (или вбок, если ориентация горизонтальная) в представлении. При этом перемещении движение элементов к новым позициям x,y в представлении будет анимировано с помощью NumberAnimation в течение одной секунды, как указано. Этот переход не применяется к элементу, который фактически был удален из представления; для анимации удаленных элементов установите свойство remove.

Если элемент смещается несколькими типами операций одновременно, не определено, будет ли применен переход addDisplaced, moveDisplaced или removeDisplaced. Кроме того, если нет необходимости задавать разные переходы в зависимости от того, смещен ли элемент в результате операции добавления, перемещения или удаления, можно установить свойство displaced вместо этого.

См. также displaced, remove и ViewTransition.

snapMode : перечисление

Это свойство определяет, как представление прокрутки будет останавливаться после перетаскивания или флика. Возможные значения:

GridView.NoSnap (по умолчанию) - представление останавливается где угодно в видимой области.
GridView.SnapToRow - представление останавливается, выравнивая строку (или столбец для GridView.FlowTopToBottom потока) с началом представления.
GridView.SnapOneRow - представление остановится не более чем на одной строке (или столбце для GridView.FlowTopToBottom потока) от первой видимой строки в момент отпускания кнопки мыши. Этот режим особенно полезен для перемещения по одной странице за раз.

verticalLayoutDirection : перечисление

Это свойство содержит направление вертикальной компоновки сетки.

Возможные значения:

GridView.TopToBottom (по умолчанию) - Элементы выстраиваются сверху представления вниз к низу.
GridView.BottomToTop - Элементы выстраиваются снизу представления вверх к верху.

См. также GridView::layoutDirection.

Документация по присоединенным свойствам

GridView.delayRemove : bool

Это присоединенное свойство содержит информацию о том, может ли делегат быть уничтожен. Оно присоединяется к каждой инстанции делегата. Значение по умолчанию — false.

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

Component {
    id: delegate
    Item {
        GridView.onRemove: SequentialAnimation {
            PropertyAction { target: wrapper; property: "GridView.delayRemove"; value: true }
            NumberAnimation { target: wrapper; property: "scale"; to: 0; duration: 250; easing.type: Easing.InOutQuad }
            PropertyAction { target: wrapper; property: "GridView.delayRemove"; value: false }
        }
    }
}

Если был задан переход remove, он не будет применен, пока delayRemove не вернется к значению false.

GridView.isCurrentItem : bool

Это присоединенное свойство имеет значение true, если этот делегат является текущим элементом; в противном случае false.

Оно присоединяется к каждой инстанции делегата.

GridView.view : GridView

Это присоединенное свойство содержит представление, которое управляет этим экземпляром делегата.

Оно присоединяется к каждому экземпляру делегата, а также к заголовку, подписи и делегатам выделения.

GridView {
    width: 300; height: 200
    cellWidth: 80; cellHeight: 80

    Component {
        id: contactsDelegate
        Rectangle {
            id: wrapper
            width: 80
            height: 80
            color: GridView.isCurrentItem ? "black" : "red"
            Text {
                id: contactInfo
                text: name + ": " + number
                color: wrapper.GridView.isCurrentItem ? "red" : "black"
            }
        }
    }

    model: ContactModel {}
    delegate: contactsDelegate
    focus: true
}

Документация по присоединенным сигналам

add()

Этот присоединенный сигнал генерируется сразу после добавления элемента в представление.

Соответствующий обработчик — onAdd.

remove()

Этот присоединенный сигнал генерируется непосредственно перед удалением элемента из представления.

Если был задан переход remove, он применяется после обработки этого сигнала, при условии, что delayRemove имеет значение false.

Соответствующий обработчик — onRemove.

Документация по методам

forceLayout()

Реакция на изменения в модели обычно группируется, чтобы происходить только один раз за кадр. Это означает, что внутри блоков скрипта модель может измениться, но GridView еще не успела отследить эти изменения.

Этот метод заставляет GridView немедленно отреагировать на все необработанные изменения в модели.