Тип QML GridView

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

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

Свойства

• add : Переход
• addDisplaced : Переход
• cacheBuffer : int
• cellHeight : real
• cellWidth : real
• count : int
• currentIndex : int
• currentItem : Item
• delegate : Компонент
• displaced : Переход
• displayMarginBeginning : int
• displayMarginEnd : int
• effectiveLayoutDirection : перечисление
• flow : перечисление
• footer : Компонент
• footerItem : Item
• header : Компонент
• headerItem : Item
• highlight : Компонент
• highlightFollowsCurrentItem : bool
• highlightItem : Item
• 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)
• Item itemAt(x, real y)
• Item itemAtIndex(index)
• moveCurrentIndexDown()
• moveCurrentIndexLeft()
• moveCurrentIndexRight()
• moveCurrentIndexUp()
• positionViewAtBeginning()
• positionViewAtEnd()
• positionViewAtIndex(index, PositionMode mode)

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

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

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

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

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

import QtQuick 2.0

ListModel {

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

Эта модель может быть использована как 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.

Ниже показан улучшенный GridView. Делегат улучшен визуально и перемещён в отдельный компонент 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, чтобы включить навигацию по клавиатуре для представления сетки. Сам GridView является областью фокуса (см. Фокус клавиатуры в 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 вместо этого.

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

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

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

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

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

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

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

move : Transition

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

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

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

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

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

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

moveDisplaced : Transition

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

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

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

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

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

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

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

• 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

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

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

GridView.view : GridView

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

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

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

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

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

Документация вложенного сигнала

add()

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

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

remove()

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

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

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

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

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

Не рекомендуется использовать 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.Начало - позиционирует элемент вверху (или слева для 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)