QML 弹力效果（Flickable）

导入	import QtQuick 2.1
继承	Item
被继承	GridView, ListView, and TableView

Properties

• atXBeginning : bool
• atXEnd : bool
• atYBeginning : bool
• atYEnd : bool
• bottomMargin : real
• boundsBehavior : enumeration
• boundsMovement : enumeration
• contentHeight : real
• contentItem : Item
• contentWidth : real
• contentX : real
• contentY : real
• dragging : bool
• draggingHorizontally : bool
• draggingVertically : bool
• flickDeceleration : real
• flickableDirection : enumeration
• flicking : bool
• flickingHorizontally : bool
• flickingVertically : bool
• horizontalOvershoot : real
• 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
• synchronousDrag : bool
• topMargin : real
• verticalOvershoot : real
• verticalVelocity : real
• visibleArea
  • visibleArea.heightRatio : real
  • visibleArea.widthRatio : real
  • visibleArea.xPosition : real
  • visibleArea.yPosition : real

Signals

• flickEnded ()
• flickStarted ()
• movementEnded ()
• movementStarted ()

Methods

• atXBeginning : bool
• cancelFlick ()
• flick (qreal xVelocity, qreal yVelocity)
• resizeContent (real width, real height, QPointF center)
• returnToBounds ()

细节描述
Flickable项将其子项放置在可拖动和轻弹的表面上，从而使子项上的视图滚动。这种行为构成了用于显示大量子项目(如ListView和GridView)的Items的基础。

拖动Flickable中的项，当松开后该项会弹回原来的位置。

下面的示例将一个小视图显示到一个大图像上，用户可以在其中拖动或拖动图像以查看它的不同部分。

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

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

注意：由于实现细节，放置在Flickable中的项不能锚定到Flickable。相反，使用parent，它指的是Flickable的contentItem。内容项的大小由contentWidth和contenttheight决定。

属性
bottomMargin : real
leftMargin : real
rightMargin : real
topMargin : real
这些属性保存内容周围的边距。除了contentWidth和contentHeight之外，这个空间是保留的。

contentHeight : real
contentWidth : real
内容的尺寸(由Flickable控制的表面)。这通常应该设置为放置在Flickable中的项目的合并大小。

下面的代码片段展示了如何使用这些属性来显示比Flickable项目本身更大的图像:

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

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

注意：鼠标在Flickable范围内（width: 200; height: 200）才能拖动item。

在某些情况下，内容大小可以根据contenttem的childrenRect.width和childrenRect.height属性自动设置。例如，前面的代码片段可以用以下方法重写:

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

尽管这假设了childrenRect的原点是0,0。

boundsBehavior : enumeration
此属性保存表面是否可以拖动到Flickable的边界之外，或在拖动时超过Flickable的边界。

当boundsmomoved是Flickable.FollowBoundsBehavior时，除了Flickable.StopAtBounds之外的值会给人一种感觉：视图的边缘是软的，而不是硬的物理边界。

boundsBehavior的取值：

boundsBehavior	描述
Flickable.StopAtBounds	不能将内容拖动到flickable的边界之外，并且不会越界。
Flickable.DragOverBounds	内容可以拖动到Flickable的边界之外，但是不会越界。
Flickable.OvershootBounds	内容可能在抖动时超出边界，但不能拖动内容超出可抖动的边界。
Flickable.DragAndOvershootBounds (默认)	内容可以拖动到Flickable的边界之外，并且在Flickable的时候可以超过边界。

    Flickable {
        id: filck
        width: 200; height: 200
        contentWidth: rect.width; contentHeight: rect.height

        boundsBehavior: Flickable.DragAndOvershootBounds

        Rectangle {
            id: rect
            color: 'green'
            radius: 10
            width: 300
            height: 300
        }
    }

boundsMovement : enumeration
这个属性决定了flickable是否会给人一种视图边缘是软的，而不是硬的物理边界的感觉。

boundsMovement的取值：

boundsMovement	描述
Flickable.StopAtBounds	这允许实现自定义边缘效果，在这种效果下，内容不会随着拖动或超出flickable对象的边界而移动。horizontalOvershoot和verticalOvershoot的值可以用来实现自定义的边缘效果。
Flickable.FollowBoundsBehavior(默认)	内容是否超出可点击对象的边界，由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)
}

这个属性是在Qt 5.10中引入的。

originX : real
originY : real
这些属性保存内容的原点。这个值总是指向内容的左上角位置，而与布局方向无关。
这通常是(0,0)，但是ListView和GridView可能有一个任意的原点，因为委托大小的变化，或者项目插入/删除在可见区域之外。

contentX : real
contentY : real
这些属性保存了当前位于Flickable左上角的曲面坐标。例如，如果你将图像向上移动100像素，contentY将增加100。

注意：如果你弹回原点(左上角)，反弹动画之后，contentX将与originX设置相同的值，contentY将与originY设置相同的值，它们通常是(0,0)，但是，ListView和GridView可能有一个任意的起源，由于委托大小变化，或项目插入/删除外部可见区域。所以如果你想实现垂直滚动条，一种方法是使用y:(contentY - originY) * (height / contentHeight) 定位；另一种方法是使用visibleArea中的标准化值。

下面的图像演示了在不同方向上的被弹开以及产生的contentX和contentY值。蓝色方块表示flickable对象的内容，黑色边框表示flickable对象的边界。

	contentX和contentY都是0。
	contentX和contentY都是50。
	其中contentX为-50,contentty为50。
	contentX和contentY都是-50。
	其中contentX为50,contentty为-50。

horizontalVelocity : real
verticalVelocity : real
沿x轴和y轴移动的瞬时速度，单位为像素/秒。

请注意，对于内容大小较大的视图(超过视图大小的10倍)，在多次快速连续浏览的情况下，点击的速度可能超过触摸的速度。这允许用户快速浏览大内容。

声明为Flickable子元素的项自动成为Flickable内容项的父元素。

动态创建的项需要显式地成为contententitem的父项:

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

contentItem : Item
内部项，包含要在可Flickable中移动的“项”。

rebound : Transition
当转换返回到可切换对象的边界时，它将保存应用于内容视图的转换。当视图被轻弹或拖动到内容区域的边缘时，或者当调用returnToBounds()时，就会触发转换。

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

当上面的视图超出其边界时，它将使用指定的转换返回到其边界:

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

flickDeceleration : real
这一属性保持了弹动减速的速率。

默认值是平台相关的。

flickableDirection : enumeration
此属性确定视图可切换的方向。

flickableDirection的取值：

flickableDirection	描述
Flickable.AutoFlickDirection (默认)	允许垂直弹动，如果内容不等于高度的可轻拍。如果contentWidth不等于Flickable的宽度，允许水平弹动。
Flickable.AutoFlickIfNeeded	如果内容高度大于可切换对象的高度，则允许垂直弹动。如果contentWidth大于Flickable的宽度，则允许水平弹动。
Flickable.HorizontalFlick	允许水平弹动。
Flickable.VerticalFlick	允许垂直弹动
Flickable.HorizontalAndVerticalFlick	允许在两个方向弹动。

horizontalOvershoot : real
此属性保存水平超调，即拖动或轻弹内容超过可轻弹内容边界的水平距离。当内容被拖动或轻弹超过起始位置时，该值为负值，超过结束位置时为正值;0.0。

是否报告用于拖动和/或翻动的值由boundsBehavior决定。即使boundsMovement是Flickable.StopAtBounds，也会报告超调距离。

这个属性是在Qt 5.9中引入的。

interactive : bool
**此属性描述用户是否可以与Flickable交互。**用户不能拖动或轻击非交互式的Flickable对象。

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

**此属性对于临时禁用鼠标点击非常有用。**这允许与Flickable的子项进行特殊的交互;例如，您可能想在滚动一个弹出对话框时冻结一个flickable的地图，该对话框是flickable的子对话框。

maximumFlickVelocity : real
此属性保存了用户以像素/秒为单位轻弹视图的最大速度。

默认值是平台相关的。

pixelAligned : bool
这个属性将contentX和contentty的对齐方式设置为pixels (true)或subpixels (false)。

启用pixelAligned来优化静态内容或具有高对比度边缘的移动内容，如单像素宽的线、文本或矢量图形。当优化动画质量时禁用pixelAligned。

默认为false。

pressDelay : int
此属性保存向Flickable的子节点传递新闻的延迟时间(毫秒)。当玩家在点击动作前对媒体做出反应时，这一点很有用。

如果在延迟时间结束前拖动/切换可切换按钮，则按下事件将不会发送。如果在超时时间内按钮被释放，按下和释放都将被发送。

注意，对于嵌套的Flickables设置了pressDelay，外部Flickables的pressDelay被最内部的Flickable覆盖。如果拖动超过平台拖动阈值，则会发送新闻事件。

synchronousDrag : bool
如果此属性设置为true，那么当鼠标或触点移动到足以开始拖动内容时，内容将跳转，这样，按下时光标或触点下的内容像素将保持在该点下。

默认值是false，这提供了一个更流畅的体验(没有跳跃)，但代价是在一开始就“丢失”了一些拖动距离。

这个属性是在Qt 5.12中引入的。

verticalOvershoot : real
此属性保存垂直超调，即拖动或轻弹内容超过可轻弹内容边界的垂直距离。当内容被拖动或轻弹超过起始位置时，该值为负值，超过结束位置时为正值;0.0。

是否报告用于拖动和/或翻动的值由boundsBehavior决定。即使boundsMovement是Flickable.StopAtBounds，也会报告超调距离。

这个属性是在Qt 5.9中引入的。

moving : bool
movingHorizontally : bool
movingVertically : bool
这些属性描述了由于用户拖动或轻弹视图，视图当前是水平移动、垂直移动还是向两个方向移动。【只读】

dragging : bool
draggingHorizontally : bool
draggingVertically : bool
这些属性描述了由于用户拖动视图，视图当前是水平移动、垂直移动还是向任意方向移动。【只读】

flicking : bool
flickingHorizontally : bool
flickingVertically : bool
这些属性描述了由于用户轻弹视图，视图当前是水平移动、垂直移动还是向任意方向移动。

atXBeginning : bool
atXEnd : bool
atYBeginning : bool
atYEnd : bool
如果flickable视图分别位于开头或结尾，则这些属性为真。

visibleArea.heightRatio : real
visibleArea.widthRatio : real
visibleArea.xPosition : real
visibleArea.yPosition : real
这些属性描述了当前查看区域的位置和大小。大小定义为当前可见的完整视图的百分比，缩放到0.0 - 1.0。页面位置通常在0.0(开始)到1.0减去大小比(结束)的范围内，即yPosition在0.0到1.0-height ratio的范围内。但是，也有可能将内容拖出正常范围，导致页面位置也在正常范围之外。

这些属性通常用于绘制滚动条。例如:

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)
调整内容为宽度x高度约为中心。

这不会缩放可切换的内容-它只是调整内容宽度和内容高度。

调整内容的大小可能会导致内容被定位在可Flickable的边界之外。调用returnToBounds()将把内容移回合法范围内。

returnToBounds ()
确保内容在合法范围内。

可以调用此函数以确保在手动定位内容后内容处于合法范围内。