Spec-Zone.ru › Qt 5.11

Тип QML GridView

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

Заявление об импорте: import QtQuick 2.11
Наследует:

Flickable

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

Свойства

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

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

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

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

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

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

import QtQuick 2.0

ListModel {

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

Эта модель может быть обращена к ней как ContactModel в других файлах QML. См. Модули QML для получения дополнительной информации о создании таких повторно используемых компонентов.

Другой компонент может отображать данные этой модели в GridView, как показано в следующем примере, который создаёт компонент ContactModel для своей модели и Column (содержащий Image и Text элементы) для своего делегата.

import QtQuick 2.0

GridView {
    width: 300; height: 200

    model: ContactModel {}
    delegate: Column {
        Image { source: portrait; anchors.horizontalCenter: parent.horizontalCenter }
        Text { text: name; anchors.horizontalCenter: parent.horizontalCenter }
    }
}

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

Ниже показано улучшенное представление сетки. Делегат визуально улучшен и перемещён в отдельный компонент contactDelegate.

Rectangle {
    width: 300; height: 200

    Component {
        id: contactDelegate
        Item {
            width: grid.cellWidth; height: grid.cellHeight
            Column {
                anchors.fill: parent
                Image { source: portrait; anchors.horizontalCenter: parent.horizontalCenter }
                Text { text: name; anchors.horizontalCenter: parent.horizontalCenter }
            }
        }
    }

    GridView {
        id: grid
        anchors.fill: parent
        cellWidth: 80; cellHeight: 80

        model: ContactModel {}
        delegate: contactDelegate
        highlight: Rectangle { color: "lightsteelblue"; radius: 5 }
        focus: true
    }
}

Текущий выбранный элемент выделяется синим Rectangle с помощью свойства highlight, и focus установлено в true для активации навигации по клавиатуре для представления сетки. Само представление сетки является областью фокуса (см. Фокус клавиатуры в Qt Quick для получения дополнительной информации).

Делегаты создаются по мере необходимости и могут быть уничтожены в любое время. Состояние никогда не должно храниться в делегате.

GridView прикрепляет ряд свойств к корневому элементу делегата, например GridView.isCurrentItem. В приведенном ниже примере корневой элемент делегата может напрямую получить доступ к этому прикреплённому свойству как GridView.isCurrentItem, в то время как дочерний объект contactInfo должен ссылаться на это свойство как wrapper.GridView.isCurrentItem.

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

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

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

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

GridView со значением GridView.FlowLeftToRight flow
(Г) Слева направо (В) Сверху вниз

(Г) Справа налево (В) Сверху вниз

(Г) Слева направо (В) Снизу вверх

(Г) Справа налево (В) Снизу вверх

GridView со значением GridView.FlowTopToBottom flow
(Г) Слева направо (В) Сверху вниз

(Г) Справа налево (В) Сверху вниз

(Г) Слева направо (В) Снизу вверх

(Г) Справа налево (В) Снизу вверх

См. также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 вместо этого.

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

displayMarginEnd : int

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

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

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

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

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

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

effectiveLayoutDirection : enumeration

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

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

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

flow : enumeration

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

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

  • 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 : enumeration

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

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

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

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

keyNavigationEnabled : bool

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

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

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

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

См. также interactive.

keyNavigationWraps : bool

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

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

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

layoutDirection : enumeration

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

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

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

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

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

removeDisplaced : Transition

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

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

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

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

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

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

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

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

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

  • 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 немедленно реагировать на любые необработанные изменения в модели.

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

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

int indexAt(вещественное x, вещественное y)

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

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

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

Item itemAt(вещественное x, вещественное y)

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

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

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

moveCurrentIndexDown()

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

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

moveCurrentIndexLeft()

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

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

moveCurrentIndexRight()

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

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

moveCurrentIndexUp()

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

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

positionViewAtBeginning()

positionViewAtEnd()

positionViewAtIndex(int индекс, PositionMode режим)

Располагает представление так, чтобы элемент с индексом индекс находился в позиции, заданной режимом:

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

© The Qt Company Ltd
Licensed under the GNU Free Documentation License, Version 1.3.
https://doc.qt.io/archives/qt-5.11/qml-qtquick-gridview.html

Spec-Zone.ru

Настройки Оффлайн Что нового Помощь О нас
Spec-Zone .ru
спецификации, руководства, описания, API