Тип 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(x, real y)
• Элемент itemAt(x, real y)
• Элемент itemAtIndex(index)
• moveCurrentIndexDown()
• moveCurrentIndexLeft()
• moveCurrentIndexRight()
• moveCurrentIndexUp()
• positionViewAtBeginning()
• positionViewAtEnd()
• positionViewAtIndex(index, PositionMode mode)

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

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

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

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

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

import QtQuick 2.0

ListModel {

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

Эту модель можно ссылаться как 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
    }
}

Текущий выбранный элемент выделен синим Прямоугольником с помощью свойства 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 - Просмотры.

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

cellWidth : real

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

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

displayMarginBeginning : int

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

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

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

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

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

Данная документация была добавлена в QtQuick 2.3.

preferredHighlightBegin : real

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

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

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

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

currentIndex : int

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

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

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

Примечание: Установка этого свойства не заменяет создание эффективных делегатов. Это может улучшить плавность поведения прокрутки за счёт дополнительного использования памяти. Чем меньше объектов и связей в делегате, тем быстрее просмотр может быть прокручен. Важно понимать, что установка 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.

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 : модель

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

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

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

move : Переход

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

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

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

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

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

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

moveDisplaced : Переход

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

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

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

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

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

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

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

populate : Переход

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

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

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

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

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

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

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

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

remove : Переход

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

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

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 : Переход

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

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

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

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

forceLayout()

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

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

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

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

int indexAt(x, real y)

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

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

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

Item itemAt(x, real y)

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

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

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

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