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

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

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

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

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

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

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

count : int

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

delegate : Component

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

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

Размер элемента в GridView определяется свойствами 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 не станет ложным.

Дополнительные сведения и примеры использования переходов представления см. в документации 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 }
        }
    }
}

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

GridView.isCurrentItem : bool

Это свойство «прикреплённого» типа истинно, если этот делегат является текущим элементом; в противном случае ложно.

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

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()

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

Если был задан переход удаления, он применяется после обработки этого сигнала, при условии, что 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()

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

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

moveCurrentIndexLeft()

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

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

moveCurrentIndexRight()

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

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

moveCurrentIndexUp()

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

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

positionViewAtIndex(int index, PositionMode mode)

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

• GridView.Начало - позиционирует элемент вверху (или слева для GridView.FlowTopToBottom ориентации) представления.
• GridView.Центр - позиционирует элемент в центре представления.
• GridView.Конец - позиционирует элемент внизу (или справа для горизонтальной ориентации) представления.
• GridView.Видимый - если какая-либо часть элемента видна, то никаких действий не производится, в противном случае элемент приводится в область видимости.
• GridView.Содержащий - гарантирует, что весь элемент виден. Если элемент больше, чем представление, он позиционируется вверху (или слева для GridView.FlowTopToBottom ориентации) представления.
• GridView.ТочкаФиксации - позиционирует элемент в preferredHighlightBegin. Этот режим допустим только если highlightRangeMode равен StrictlyEnforceRange или фиксация включена через snapMode.

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

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

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

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