可滑动 QML 类型

提供可以“滑动”的表面。 更多...

导入语句import QtQuick
继承

Item

继承自

GridViewListViewTableView

属性

信号

方法

详细描述

Flickable 项目将其子项放置在一个可拖动和翻页的表面上,导致对子项视图的滚动。这种行为构成了设计用于显示大量子项的项目的基础,例如 ListViewGridView

在传统的用户界面中,可以使用标准的控件,如滚动条和箭头按钮来滚动视图。在某些情况下,也可以在移动光标的同时按下并保持鼠标按钮来直接拖动视图。在基于触控的用户界面中,这种拖动动作通常与翻页动作相辅相成,即用户停止触摸视图后继续滚动。

Flickable 不会自动裁剪其内容。如果它不是作为全屏项目使用,您应考虑将 clip 属性设置为 true。

示例用法

以下示例显示了一个小视图,用于查看大图像,用户可以拖动或翻页图像以查看其不同部分。

import QtQuick

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

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

作为 Flickable 子项声明的项目会自动成为 Flickable 的 contentItem 的父项。在操作 Flickable 的子项时,应考虑这一点;通常,相关的是 contentItem 的子项。例如,添加到 Flickable 的项目的边界将通过 contentItem.childrenRect 获得

contentX 和 contentY 的示例

以下图像展示了在各种方向上翻页的翻页效果以及相应的 contentXcontentY 值。蓝色方块代表翻页的内容,黑色边框代表翻页的边界。

contentXcontentY 均为 0

contentXcontentY 均为 50

contentX-50contentY50

contentXcontentY 均为 -50

contentX50contentY-50

限制

注意: 由于实现细节,放置在 Flickable 内部的项目无法与 Flickable 锚定。相反,使用 parent,它指的是 Flickable 的 contentItem。内容项的大小由 contentWidthcontentHeight 决定。

属性文档

contentX : real

contentY : real

这些属性持有 Flickable 顶部左角的当前表面坐标。例如,如果您将图像向上滑动 100 像素,则 contentY 将增加 100。

注意: 如果您滑回原点(顶部左角),在回弹动画之后,contentX 将降至与 originX 相同的值,contentY 将降至 originY。这些通常是 (0,0),然而 ListViewGridView 由于代理大小变化或在可见区域外插入/删除项,可能有任意的原点。因此,如果您想实现类似垂直滚动条的功能,一种方法是将位置设置为 y: (contentY - originY) * (height / contentHeight);另一种方法是使用 visibleArea 中的归一化值。

另请参阅 contentX 和 contentY 的示例originXoriginY


horizontalVelocity : real [只读]

verticalVelocity : real [只读]

沿 x 和 y 轴移动的瞬时速度,以像素/秒为单位。

报告的速度已经进行了平滑处理,以避免错误的输出。

请注意,对于内容大小很大的视图(大于视图大小的 10 倍),在多个快速连续滑动的情况下,滑动的速度可能会超过触摸的速度。这使得用户能够更快地滑动通过大内容。


atXBeginning : bool [只读]

atXEnd : bool [只读]

atYBeginning : bool [只读]

atYEnd : bool [只读]

如果可滑动视图定位在开始或结束位置,则这些属性为真。


contentHeight : real

contentWidth : real

内容的大小(由 Flickable 控制的表面)。通常应将其设置为放置在 Flickable 中的项的合并大小。

以下片段显示了如何使用这些属性显示比 Flickable 项本身更大的图像

import QtQuick

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

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

在某些情况下,内容尺寸可以基于 childrenRect.widthchildrenRect.height 属性自动设置 contentItem。例如,前面的片段可以改写为

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

虽然这假设了 childrenRect 的原点是 0,0。


bottomMargin : real

leftMargin : real

rightMargin : real

topMargin : 实数

这些属性存储内容周围的外边距。除了contentWidthcontentHeight,这个空间也被预留。


originX : 实数 [只读]

originY : 实数 [只读]

这些属性存储内容的位置。该值始终指向内容的左上角,不论布局方向如何。

这通常是(0,0),然而由于ListViewGridView的代理大小变化,或项目在可见区域外插入/删除,可能具有任意的起始位置。

另请参阅contentXcontentY


flicking : 布尔值 [只读]

flickingHorizontally : 布尔值 [只读]

flickingVertically : 布尔值 [只读]

这些属性描述了视口是否由于用户快速扫动视图而不在当前水平移动,垂直移动或两个方向漫游。


dragging : 布尔值 [只读]

draggingHorizontally : 布尔值 [只读]

draggingVertically : 布尔值 [只读]

这些属性描述了视图是否由于用户拖动而非拖动或快速扫动而当前在不水平、垂直或两个方向移动。


moving : 布尔值 [只读]

movingHorizontally : 布尔值 [只读]

movingVertically : 布尔值 [只读]

这些属性描述了视图是当前在不水平、垂直或两个方向移动,是由于用户拖动或快速扫动视图。


boundsBehavior : 枚举

此属性表示表面是否可能被拖动超出Flickable的边界,或在快速扫动时超出Flickable的边界。

boundsMovementFlickable.FollowBoundsBehavior时,非Flickable.StopAtBounds值将产生视图边缘柔和的感觉,而不是硬的物理边界。

boundsBehavior可以是以下之一:

  • Flickable.StopAtBounds - 内容不能被拖动超出可快速扫动的边界,快速扫动时也将停止。
  • Flickable.DragOverBounds - 内容可以被拖动超出Flickable的边界,但快速扫动时不会超出。
  • Flickable.OvershootBounds - 在快速扫动时内容可以超出边界,但内容不能被拖动超出可快速扫动的边界。(自QtQuick 2.5起)
  • Flickable.DragAndOvershootBounds(默认)- 内容可以被拖动超出 Flickable 的边界,并在快速滚动时超出边界。

另见 horizontalOvershootverticalOvershoot,和 boundsMovement


boundsMovement : 枚举

此属性表示 Flickable 是否给用户一种感觉,即视图的边缘是柔软的,而不是硬的物理边界。

boundsMovement 可以是以下之一

  • Flickable.StopAtBounds - 这允许实现自定义边缘效果,其中内容不跟随 Flickable 边界之外的拖动或快速滚动。可以利用 horizontalOvershootverticalOvershoot 的值来实现自定义边缘效果。
  • Flickable.FollowBoundsBehavior(默认)- 内容是否跟随 Flickable 边界之外的拖动或快速滚动由 boundsBehavior 确定。

以下示例将内容保持在不超出边界内,而是在水平边界外快速滚动时应用翻转效果

Flickable {
    id: flickable
    boundsMovement: Flickable.StopAtBounds
    boundsBehavior: Flickable.DragAndOvershootBounds
    transform: Rotation {
        axis { x: 0; y: 1; z: 0 }
        origin.x: flickable.width / 2
        origin.y: flickable.height / 2
        angle: Math.min(30, Math.max(-30, flickable.horizontalOvershoot))
    }
}

以下示例将内容保持在不超出边界内,而是在垂直边界外拖动时应用透明度效果

Flickable {
    boundsMovement: Flickable.StopAtBounds
    boundsBehavior: Flickable.DragOverBounds
    opacity: Math.max(0.5, 1.0 - Math.abs(verticalOvershoot) / height)
}

另见 boundsBehaviorverticalOvershoot,和 horizontalOvershoot


contentItem : Item [只读]

包含要移动的项的内部项。

声明为 Flickable 子项的项会自动成为 Flickable 的 contentItem 的父项。

动态创建的项需要明确绑定到 contentItem

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

flickDeceleration : real

此属性表示快速滚动的减速率:数字越高,当用户通过触摸停止快速滚动时,减速越快。例如,0.0001 几乎“无摩擦”,10000 则感觉相当“粘滞”。

默认值取决于平台。不允许使用零或负数。


flickableDirection : 枚举

此属性确定可滚动哪些方向。

  • Flickable.AutoFlickDirection(默认)- 如果 contentHeight 不等于 Flickable 的高度,则允许垂直滚动。如果 contentWidth 不等于 Flickable 的宽度,则允许水平滚动。
  • Flickable.AutoFlickIfNeeded - 如果 contentHeight 大于 Flickable 的高度,则允许垂直滚动。如果 contentWidth 大于 Flickable 的宽度,则允许水平滚动。(自 QtQuick 2.7 起)
  • Flickable.HorizontalFlick - 允许水平滚动。
  • Flickable.VerticalFlick - 允许垂直滚动。
  • Flickable.HorizontalAndVerticalFlick - 允许在两个方向上滚动。

horizontalOvershoot : real [只读]

此属性表示水平的超出量,即内容已经拖动或快速滚动的水平距离超过了 Flickable 的边界。当内容拖动或快速滚动超过起始端时,值为负;超过末端时,值为正;否则,值为 0.0

是否报告了拖动和/或快速滑动操作中的值由 boundsBehavior 决定。即使 boundsMovement 设置为 Flickable.StopAtBounds,也会报告超出距离。

另请参阅 verticalOvershootboundsBehaviorboundsMovement


interactive : bool

此属性描述用户是否可以与 Flickable 交互。如果 Flickable 不是交互式的,则用户无法拖动或快速滑动。

默认情况下,此属性为 true。

此属性对于暂时禁用滚动很有用。这允许与 Flickable 子项的特殊交互;例如,在滚动通过 Flickable 子弹窗时可能希望冻结 Flickable 地图。


maximumFlickVelocity : real

此属性包含用户可以每秒以像素速度快速滑动视图的最大速度。

默认值取决于平台。


pixelAligned : bool

此属性设置 contentXcontentY 的对齐方式为像素(true)或亚像素(false)。

启用 pixelAligned 时,可针对静态内容或具有高对比度边缘的移动内容进行优化,如像素宽度的线条、文本或矢量图形。在优化动画质量时禁用 pixelAligned。

默认值为 false


pressDelay : int

此属性保存将按压力(毫秒)延迟传递给 Flickable 子项的时间。在某些情况下,在快速滑动动作之前对按压力做出反应会产生不良效果,这种情况下可能会用到它。

如果在延迟超时之前拖动/快速滑动,则不会传递按压力事件。如果在超时时间内释放按钮,则将传递按压力和释放事件。

请注意,对于设置了 pressDelay 的嵌套 Flickable,外部 Flickable 的 pressDelay 将被最内层的 Flickable 覆盖。如果拖动超过平台拖动阈值,则不考虑此属性,会将按压力事件传递。

另请参阅 QStyleHints


rebound : Transition

此属性包含当内容视图回到可拖动区域的边界时将应用于内容的过渡。当视图被快速滑动或拖动到内容区域的边缘,或调用 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" }
        }
    }
}

当上述视图超出其边界时,将使用指定过渡返回到其边界。

如果未设置此属性,则应用默认动画。


synchronousDrag : bool

如果设置此属性为 true,则在鼠标或触摸点移动到足够远的距离以开始拖动内容时,内容将跳跃,使得在被按下的时 pursuits 点下方的像素仍然位于该点。

默认为 false,这提供了一个更平滑的体验(没有跳跃),但代价是部分拖动距离在开始时“丢失”。


verticalOvershoot : real [只读]

此属性表示垂直超出量,即内容被拖动或快速滑动超过可滑动区域边界时的垂直距离。当内容被拖动或快速滑动超过起始位置时,值一般为负,超过末尾时值为正;否则 0.0

是否报告了拖动和/或快速滑动操作中的值由 boundsBehavior 决定。即使 boundsMovement 设置为 Flickable.StopAtBounds,也会报告超出距离。

另请参阅 水平超出边界行为边界移动


可见区域组

visibleArea.heightRatio : 实数 [只读]

visibleArea.widthRatio : 实数 [只读]

visibleArea.xPosition : 实数 [只读]

visibleArea.yPosition : 实数 [只读]

这些属性描述了当前查看区域的当前位置和大小。大小是指全视图当前可见部分的百分比,缩放至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"
    }
}

信号文档

dragEnded()

当用户停止拖动视图时,将发出此信号。

如果在释放触摸/鼠标按钮时拖动的速度足够快,则会开始快速滑动。

注意: 对应的事件处理器是 onDragEnded


dragStarted()

当用户交互导致开始拖动视图时,将发出此信号。

注意: 对应的事件处理器是 onDragStarted


flickEnded()

在快速滑动或一系列快速滑动之后,视图停止移动时,将发出此信号。

注意: 对应的事件处理器是 onFlickEnded


flickStarted()

当视图被快速滑动时,将发出此信号。快速滑动从鼠标或触摸释放的点开始,此时仍在移动中。

注意: 对应的事件处理器是 onFlickStarted


movementEnded()

当用户交互或生成的 快速滑动 导致视图停止移动时,将发出此信号。如果正在进行的快速滑动,当快速滑动停止时,将发出此信号。如果没有正在进行的快速滑动,则在用户停止拖动时发出此信号,即鼠标或触摸释放。

注意: 对应的事件处理器是 onMovementEnded


movementStarted()

当用户交互或生成的 快速滑动 导致视图开始移动时,将发出此信号。

注意: 对应的事件处理器是 onMovementStarted


方法文档

cancelFlick()

取消当前的快速滑动动画。


flick(qreal xVelocity, qreal yVelocity)

以每秒像素数 xVelocity 水平快速滑动,以 yVelocity 垂直快速滑动内容。

调用此方法将更新相应的移动和快速滑动属性和信号,就像真实的触摸屏快速滑动一样。


resizeContent(实数 width, 实数 height, QPointF center)

调整内容大小至 宽度 x 高度 大小,约为 中心

这不会缩放可滚动的视图的内容,它仅调整contentWidthcontentHeight

调整内容大小可能会导致内容被放置在可滚动的视图边界之外。调用returnToBounds() 将内容移回合法边界。


returnToBounds()

确保内容在合法边界内。

可以在手动定位内容后调用以确保内容在合法边界内。


© 2024 Qt公司。本文件中的文档的贡献属于其各自的版权所有者。本文件中提供的文档是根据自由软件基金会发布的GNU自由文档许可协议版本1.3许可的。Qt和相应的标志是芬兰的Qt公司以及世界各国/地区的商标。所有其他商标归其各自所有者。