Тип GridView QML

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

Оператор импорта:	import QtQuick 2.12
Наследует:	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 : перечисление
keyNavigationEnabled : bool
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.

GridView имеет свойство model, которое определяет данные для отображения, и свойство delegate, которое определяет, как данные должны быть отображены. Элементы в GridView выстраиваются по горизонтали или вертикали. GridView по своей природе имеет возможность прокрутки, так как 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"
    }
}

Эту модель можно использовать как ContactModel в других файлах QML. Дополнительную информацию о создании таких переиспользуемых компонентов см. в разделе Модули 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 flow
(Г) Слева направо (В) Сверху вниз	(Г) Справа налево (В) Сверху вниз	(Г) Слева направо (В) Снизу вверх	(Г) Справа налево (В) Снизу вверх
GridView с GridView.FlowTopToBottom flow
(Г) Слева направо (В) Сверху вниз	(Г) Справа налево (В) Сверху вниз	(Г) Слева направо (В) Снизу вверх	(Г) Справа налево (В) Снизу вверх

См. также 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 вместо этого.

Примечание: Этот переход не применяется к элементам, созданным при первоначальной загрузке просмотра или при изменении модели просмотра 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

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

delegate : Component

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

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

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

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

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

displaced : Переход

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

Это удобство для задания общего перехода для элементов, смещённых операциями добавления, перемещения или удаления, без необходимости задания отдельных свойств 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 вместо этого.

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

displayMarginEnd : int

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

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

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

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

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

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

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

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

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

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

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

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

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

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

footerItem : Элемент

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

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

header : Компонент

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

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

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

headerItem : Элемент

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

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

highlight : Компонент

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

Экземпляр компонента выделения создаётся для каждого представления. Геометрия созданного экземпляра компонента будет управляться представлением, чтобы оставаться с текущим элементом, если свойство 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 : Элемент

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

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

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

highlightMoveDuration : int

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

highlightFollowsCurrentItem должно быть true, чтобы это свойство имело эффект.

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

См. также highlightFollowsCurrentItem.

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

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

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

END_OF_DOCUMENT_MARKER

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

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

keyNavigationEnabled : bool

Данное свойство указывает, включена ли навигация по сетке с помощью клавиш.

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

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

Это свойство было добавлено в Qt 5.7.

См. также interactive.

keyNavigationWraps : bool

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

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

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

layoutDirection : enumeration

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

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

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, DelegateModel или ObjectModel, или предоставлены классами моделей 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 вместо этого.

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

populate : Transition

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

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

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

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

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

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

См. также 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 вместо этого.

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

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

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

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

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

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

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

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

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

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

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

GridView.delayRemove : bool

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

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

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, если этот делегат является текущим элементом; в противном случае ложь.

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

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 имеет значение ложь.

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

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

positionViewAtBeginning()

Размещает представление в начале или конце, учитывая заголовок и подвал.

Не рекомендуется использовать contentX или contentY для размещения представления в конкретном индексе. Это ненадежно, поскольку удаление элементов из начала списка не приводит к перераспределению всех остальных элементов, и потому что фактическое начало представления может варьироваться в зависимости от размера делегатов.

Примечание: методы следует вызывать только после завершения компонента. Чтобы расположить представление при запуске, этот метод следует вызывать с помощью Component.onCompleted. Например, чтобы расположить представление в конце при запуске:

Component.onCompleted: positionViewAtEnd()

forceLayout()

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

Этот метод заставляет GridView немедленно отреагировать на все ожидающие изменения в модели.