Тип QML Flickable

Обеспечивает поверхность, которую можно «протащить» Подробнее...

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

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

Свойства

atXBeginning : bool
atXEnd : bool
atYBeginning : bool
atYEnd : bool
bottomMargin : real
boundsBehavior : перечисление
contentHeight : real
contentItem : Item
contentWidth : real
contentX : real
contentY : real
dragging : bool
draggingHorizontally : bool
draggingVertically : bool
flickDeceleration : real
flickableDirection : перечисление
flicking : bool
flickingHorizontally : bool
flickingVertically : bool
horizontalVelocity : real
interactive : bool
leftMargin : real
maximumFlickVelocity : real
moving : bool
movingHorizontally : bool
movingVertically : bool
originX : real
originY : real
pixelAligned : bool
pressDelay : int
rebound : Transition
rightMargin : real
topMargin : real
verticalVelocity : real
visibleArea
- visibleArea.xPosition : real
- visibleArea.widthRatio : real
- visibleArea.yPosition : real
- visibleArea.heightRatio : real

Сигналы

Методы

cancelFlick()
flick(qreal xVelocity, qreal yVelocity)
resizeContent(real width, real height, QPointF center)
returnToBounds()

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

Элемент Flickable размещает своих потомков на поверхности, которую можно перетаскивать и «протаскивать», вызывая прокрутку представления элементов потомков. Это поведение является основой элементов, предназначенных для отображения большого количества элементов потомков, таких как ListView и GridView.

В традиционных пользовательских интерфейсах представления могут прокручиваться с помощью стандартных элементов управления, таких как полосы прокрутки и кнопки стрелок. В некоторых ситуациях также можно перетащить представление напрямую, нажав и удерживая кнопку мыши, перемещая курсор. В пользовательских интерфейсах на основе сенсорного ввода это действие перетаскивания часто дополняется действием «протаскивания», где прокрутка продолжается после того, как пользователь перестал касаться представления.

Flickable не автоматически обрезает свой контент. Если он не используется как элемент всего экрана, вам следует рассмотреть возможность установки свойства clip в значение true.

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

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

import QtQuick 2.0

Flickable {
    width: 200; height: 200
    contentWidth: image.width; contentHeight: image.height

    Image { id: image; source: "bigImage.png" }
}

Элементы, объявленные как потомки Flickable, автоматически становятся потомками contentItem Flickable. Это следует учитывать при работе с потомками Flickable; обычно это потомки contentItem являются релевантными. Например, границы элементов, добавленных в Flickable, будут доступны по contentItem.childrenRect

Ограничения

Примечание: Из-за особенности реализации элементы, размещенные внутри Flickable, не могут быть закреплены к нему с помощью id. Используйте parent вместо этого.

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

atXBeginning : bool

Эти свойства равны true, если представление flickable расположено в начале или в конце соответственно.

atXEnd : bool

Эти свойства равны true, если представление flickable расположено в начале или в конце соответственно.

atYBeginning : bool

Эти свойства равны true, если представление flickable расположено в начале или в конце соответственно.

atYEnd : bool

Эти свойства равны true, если представление flickable расположено в начале или в конце соответственно.

bottomMargin : real

Эти свойства содержат отступы вокруг контента. Это пространство резервируется дополнительно к contentWidth и contentHeight.

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

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

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

Значение boundsBehavior может быть одним из следующих:

Flickable.StopAtBounds - содержимое не может быть перетащено за пределы границы flickable, и «протаскивание» не будет переходить границы.
Flickable.DragOverBounds - содержимое может быть перетащено за пределы границы Flickable, но «протаскивание» не будет переходить границы.
Flickable.OvershootBounds - содержимое может переходить границу при «протаскивании», но содержимое не может быть перетащено за пределы границы flickable. (с QtQuick 2.5)
Flickable.DragAndOvershootBounds (по умолчанию) - содержимое может быть перетащено за пределы границы Flickable и может переходить границу при «протаскивании».

contentHeight : real

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

Следующий фрагмент кода демонстрирует, как используются эти свойства для отображения изображения, которое больше, чем сам элемент Flickable:

import QtQuick 2.0

Flickable {
    width: 200; height: 200
    contentWidth: image.width; contentHeight: image.height

    Image { id: image; source: "bigImage.png" }
}

В некоторых случаях размеры содержимого могут быть автоматически установлены на основе свойств childrenRect.width и childrenRect.height свойства contentItem. Например, предыдущий фрагмент кода можно переписать как:

contentWidth: contentItem.childrenRect.width; contentHeight: contentItem.childrenRect.height

Хотя это предполагает, что начало координат childrenRect находится в 0,0.

contentItem : Item

Внутренний элемент, содержащий элементы, которые нужно перемещать в Flickable.

Элементы, объявленные как дочерние для Flickable, автоматически становятся дочерними для contentItem Flickable.

Динамически созданные элементы необходимо явно привязать к contentItem:

Flickable {
    id: myFlickable
    function addItem(file) {
        var component = Qt.createComponent(file)
        component.createObject(myFlickable.contentItem);
    }
}

contentWidth : real

Размеры содержимого (поверхности, управляемой Flickable). Обычно это значение устанавливается равным совокупным размерам элементов, размещённых в Flickable.

Следующий фрагмент кода демонстрирует, как эти свойства используются для отображения изображения, размер которого превышает размер самого элемента Flickable:

import QtQuick 2.0

Flickable {
    width: 200; height: 200
    contentWidth: image.width; contentHeight: image.height

    Image { id: image; source: "bigImage.png" }
}

В некоторых случаях размеры содержимого могут быть автоматически установлены на основе свойств childrenRect.width и childrenRect.height элемента contentItem. Например, предыдущий фрагмент можно переписать с использованием:

contentWidth: contentItem.childrenRect.width; contentHeight: contentItem.childrenRect.height

Хотя это предполагает, что начало childrenRect находится в точке 0,0.

contentX : real

Эти свойства содержат координату поверхности, которая в данный момент находится в верхнем левом углу Flickable. Например, если вы протащили изображение вверх на 100 пикселей, то contentY будет равно 100.

contentY : real

dragging : bool

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

draggingHorizontally : bool

draggingVertically : bool

flickDeceleration : real

Это свойство задаёт скорость замедления при размахе.

Значение по умолчанию зависит от платформы.

flickableDirection : enumeration

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

Flickable.AutoFlickDirection (по умолчанию) - разрешает размах по вертикали, если contentHeight не равно height Flickable. Разрешает размах по горизонтали, если contentWidth не равно width Flickable.
Flickable.HorizontalFlick - разрешает размах по горизонтали.
Flickable.VerticalFlick - разрешает размах по вертикали.
Flickable.HorizontalAndVerticalFlick - разрешает размах в обоих направлениях.

flicking : bool

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

flickingHorizontally : bool

flickingVertically : bool

horizontalVelocity : real

Мгновенная скорость перемещения по осям x и y в пикселях/сек.

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

Обратите внимание, что для видов с большим размером содержимого (более чем в 10 раз больше размера вида) скорость размаха может превысить скорость касания в случае нескольких быстрых последовательных размахов. Это позволяет пользователю прокручивать большой объём содержимого быстрее.

interactive : bool

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

По умолчанию это свойство равно true.

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

leftMargin : real

Эти свойства задают отступы вокруг содержимого. Это пространство зарезервировано дополнительно к contentWidth и contentHeight.

maximumFlickVelocity : real

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

Значение по умолчанию зависит от платформы.

moving : bool

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

movingHorizontally : bool

movingVertically : bool

originX : real

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

Обычно это (0,0), однако у ListView и GridView может быть произвольное начало из-за изменения размера элементов-делегатов или вставки/удаления элементов за пределами видимой области.

originY : real

pixelAligned : bool

Это свойство устанавливает выравнивание contentX и contentY на пиксели (true) или субпиксели (false).

Включите pixelAligned для оптимизации статического содержимого или перемещающегося содержимого с чёткими границами, такими как линии шириной в один пиксель, текст или векторная графика. Отключите pixelAligned при оптимизации качества анимации.

Значение по умолчанию - false.

pressDelay : int

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

Если Flickable перетаскивается/размахивается до истечения времени ожидания, событие нажатия не будет доставлено. Если кнопка отпускается в течение времени ожидания, будут доставлены как событие нажатия, так и событие отпуска.

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

См. такжеQStyleHints.

rebound : Transition

Это свойство содержит переход, который будет применён к представлению содержимого при возврате к границам Flickable. Переход запускается при размахе или перетаскивании представления за пределы области содержимого, или при вызове returnToBounds().

import QtQuick 2.0

Flickable {
    width: 150; height: 150
    contentWidth: 300; contentHeight: 300

    rebound: Transition {
        NumberAnimation {
            properties: "x,y"
            duration: 1000
            easing.type: Easing.OutBounce
        }
    }

    Rectangle {
        width: 300; height: 300
        gradient: Gradient {
            GradientStop { position: 0.0; color: "lightsteelblue" }
            GradientStop { position: 1.0; color: "blue" }
        }
    }
}

Когда указанное выше представление размахивается за пределы своих границ, оно возвращается в границы с использованием заданного перехода:

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

rightMargin : real

topMargin : real

verticalVelocity : real

Мгновенная скорость перемещения по осям x и y в пикселях/сек.

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

visibleArea.xPosition : real

Эти свойства описывают положение и размер текущей видимой области. Размер определяется как процент от полной видимой области, масштабированный до 0,0 - 1,0. Положение страницы обычно находится в диапазоне от 0,0 (начало) до 1,0 минус коэффициент размера (конец), т.е. yPosition находится в диапазоне от 0,0 до 1,0-heightRatio. Однако возможно, что содержимое будет перетащено за пределы обычного диапазона, что приведет к тому, что положение страницы также выйдет за пределы обычного диапазона.

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

Rectangle {
    width: 200; height: 200

    Flickable {
        id: flickable
        ...
    }

    Rectangle {
        id: scrollbar
        anchors.right: flickable.right
        y: flickable.visibleArea.yPosition * flickable.height
        width: 10
        height: flickable.visibleArea.heightRatio * flickable.height
        color: "black"
    }
}

См. также Примеры пользовательских компонентов: Полоса прокрутки.

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

flickEnded()

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

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

flickStarted()

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

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

movementEnded()

Этот сигнал испускается, когда перемещение области просмотра останавливается из-за взаимодействия пользователя или вызова flick(). Если встряска была активна, этот сигнал будет испущен после её завершения. Если встряска не была активна, этот сигнал будет испущен, когда пользователь прекратит перетаскивание - т.е. отпустит кнопку мыши или сенсорный экран.

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

movementStarted()

Этот сигнал испускается, когда перемещение области просмотра начинается из-за взаимодействия пользователя или вызова flick().

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

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

cancelFlick()

Отменяет текущую анимацию встряски.

flick(qreal xVelocity, qreal yVelocity)

Производит встряску содержимого со скоростью xVelocity по горизонтали и yVelocity по вертикали в пикселях/сек.

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

resizeContent(real width, real height, QPointF center)

Изменяет размер содержимого до width x height относительно точки center.

Это не масштабирует содержимое Flickable - оно только изменяет размер contentWidth и contentHeight.

Изменение размера содержимого может привести к тому, что содержимое будет расположено за пределами границ Flickable. Вызов returnToBounds() вернёт содержимое в допустимые пределы.

returnToBounds()

Обеспечивает, что содержимое находится в допустимых пределах.

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

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