Тип 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)
• moveCurrentIndexDown()
• moveCurrentIndexLeft()
• moveCurrentIndexRight()
• moveCurrentIndexUp()
• positionViewAtBeginning()
• positionViewAtEnd()
• positionViewAtIndex(int index, PositionMode mode)

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

A 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 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
    }
}

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

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

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.

cellHeight : real

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

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

cellWidth : real

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

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

count : int

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

currentIndex : int

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

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

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

currentItem : Item

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

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

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

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.

displayMarginBeginning : int

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

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

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

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

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

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

displayMarginEnd : int

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

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

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

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

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

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

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.

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

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

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

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

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

keyNavigationEnabled : bool

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

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

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

Это свойство QML было введено в 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 или VisualItemModel, или предоставлять их с помощью классов моделей 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 }
    }
}

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

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

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

preferredHighlightBegin : real

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

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

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

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

preferredHighlightEnd : real

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

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

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

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

remove : Transition

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

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

GridView {
    ...
    remove: Transition {
        ParallelAnimation {
            NumberAnimation { property: "opacity"; to: 0; duration: 1000 }
            NumberAnimation { properties: "x,y"; to: 100; duration: 1000 }
        }
    }
}

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

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

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

Это присоединённое свойство имеет значение 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.

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

forceLayout()

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

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

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

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

int indexAt(real x, real y)

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

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

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

Item itemAt(real x, real y)

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

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

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

moveCurrentIndexDown()

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

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

moveCurrentIndexLeft()

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

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

moveCurrentIndexRight()

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

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

moveCurrentIndexUp()

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

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

positionViewAtBeginning()

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

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

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

Component.onCompleted: positionViewAtEnd()

positionViewAtEnd()

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

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

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

Component.onCompleted: positionViewAtEnd()

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)