Тип QML GridView

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

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

Свойства

• 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)
• Элемент itemAtIndex(int index)
• moveCurrentIndexDown()
• moveCurrentIndexLeft()
• moveCurrentIndexRight()
• moveCurrentIndexUp()
• positionViewAtBeginning()
• positionViewAtEnd()
• positionViewAtIndex(int index, PositionMode mode)

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

add : Переход

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

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

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

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

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

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

addDisplaced : Переход

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

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

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

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

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

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

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

cacheBuffer : целое

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

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

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

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

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

count : целое

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

delegate : Компонент

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

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

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

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

displaced : Transition

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

footer : Component

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

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

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

footerItem : Item

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

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

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

header : Component

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

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

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

headerItem : Item

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

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

См. также 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.

[since 5.7] keyNavigationEnabled : bool

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

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

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

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

См. также interactive.

keyNavigationWraps : bool

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

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

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

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, 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 вместо этого.

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

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

populate : Transition

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

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

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

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

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

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

Однако при прокрутке представления позднее переход populate не выполняется, даже если делегаты создаются по мере их видимости. Когда модель изменяется таким образом, что новые делегаты становятся видимыми, применяется переход add. Поэтому не следует полагаться на переход populate для инициализации свойств в делегате, поскольку он не применяется ко всем делегатам. Если ваша анимация устанавливает значение to свойства, свойство должно изначально иметь значение to, а анимация должна установить значение from в случае анимации:

GridView {
    ...
    delegate: Rectangle {
        opacity: 1 // not necessary because it's the default; but don't set 0
        ...
    }
    populate: Transition {
        NumberAnimation { property: "opacity"; from: 0; to: 1; duration: 1000 }
    }
}

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

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

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 установлено для элемента делегата, переход remove не будет применен, пока delayRemove не станет снова false.

Для получения более подробной информации и примеров использования переходов представлений см. документацию 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 : enumeration

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

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

verticalLayoutDirection : enumeration

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

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

• 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.

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

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

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

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

Component.onCompleted: positionViewAtEnd()

[since 5.1] forceLayout()

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

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

Примечание: методы должны вызываться только после завершения компонента.

Этот метод был представлен в Qt 5.1.

int indexAt(real x, real y)

Возвращает индекс видимого элемента, содержащего точку x, y в координатах содержимого. Если в указанной точке нет элемента или элемент не виден, возвращается -1.

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

Примечание: методы должны вызываться только после завершения компонента.

Item itemAt(real x, real y)

Возвращает видимый элемент, содержащий точку x, y в координатах содержимого. Если в указанной точке нет элемента или элемент не виден, возвращается null.

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

Примечание: методы должны вызываться только после завершения компонента.

[since 5.13] Item itemAtIndex(int index)

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

Примечание: этот метод следует вызывать только после завершения компонента. Возвращаемое значение также не следует хранить, так как оно может стать null сразу же после выхода из области вызова, если представление освободит этот элемент.

Этот метод был представлен в Qt 5.13.

moveCurrentIndexDown()

Перемещает currentIndex вниз на один элемент в представлении. Текущий индекс будет циклически переходить к началу, если keyNavigationWraps равен true и он находится в конце. Этот метод не имеет эффекта, если count равен нулю.

Примечание: методы должны вызываться только после завершения компонента.

moveCurrentIndexLeft()

Перемещает currentIndex влево на один элемент в представлении. Текущий индекс будет циклически переходить к началу, если keyNavigationWraps равен true и он находится в конце. Этот метод не имеет эффекта, если count равен нулю.

Примечание: методы должны вызываться только после завершения компонента.

moveCurrentIndexRight()

Перемещает currentIndex вправо на один элемент в представлении. Текущий индекс будет циклически переходить к началу, если keyNavigationWraps равен true и он находится в конце. Этот метод не имеет эффекта, если count равен нулю.

Примечание: методы должны вызываться только после завершения компонента.

moveCurrentIndexUp()

Перемещает currentIndex вверх на один элемент в представлении. Текущий индекс будет циклически переходить к началу, если keyNavigationWraps равен true и он находится в конце. Этот метод не имеет эффекта, если count равен нулю.

Примечание: методы должны вызываться только после завершения компонента.

positionViewAtIndex(int index, PositionMode mode)

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

• GridView.Beginning - позиционирует элемент вверху (или слева для GridView.FlowTopToBottom расположения) представления.
• GridView.Center - позиционирует элемент в центре представления.
• GridView.End - позиционирует элемент внизу (или справа для горизонтальной ориентации) представления.
• GridView.Visible - если любая часть элемента видна, то не предпринимать никаких действий, в противном случае привести элемент в область видимости.
• GridView.Contain - обеспечить видимость всего элемента. Если элемент больше представления, элемент позиционируется вверху (или слева для GridView.FlowTopToBottom расположения) представления.
• GridView.SnapPosition - позиционирует элемент в preferredHighlightBegin. Этот режим допустим только если highlightRangeMode равен StrictlyEnforceRange или привязка включена через snapMode.

Если позиционирование представления по индексу приведёт к отображению пустого пространства в начале или конце представления, представление будет позиционировано на границе.

Не рекомендуется использовать contentX или contentY для позиционирования представления по определённому индексу. Это ненадёжно, так как удаление элементов из начала представления не приводит к перепозиционированию всех остальных элементов. Правильный способ вывода элемента в область видимости — positionViewAtIndex.

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

Component.onCompleted: positionViewAtIndex(count - 1, GridView.Beginning)