Flickable属性说明

Flickable组件可在里面放置Item。它能通过拖动，使Flickable上的Item滚动。这个设计是为了实现展示巨大数目的子组件。像ListView和GridView。

本文: https://www.lovejia.win/blog/article/Flickable.html
参考原文：http://doc.qt.io/qt-5/qml-qtquick-flickable.html
参考译文：http://blog.csdn.net/vampire_armand/article/details/39156459

属性说明

atXBeginning: bool

flickable视图在X轴的开始位置，则为true。

atXEnd :bool

flickable视图在X轴的结束位置，则为true。

atYBeginning: bool

flickable视图在Y轴的开始位置，则为true。

atYEnd :bool

flickable视图在Y轴的结束位置，则为true。

bottomMargin: real

底部尺寸，除了contentWidth和contentHeight外被保留的空间。

boundsBehavior: enumeration

表面拖出Flickable的边界或过度的滚出Flickable的边界的处理。这能让边界变得像有弹性一样。
它能是下面的值：
Flickable.StopAtBounds-不能拖或滚出边界，在边界停止。
Flickable.DragOverBounds-能拖出边界，但不可以滚出边界。
Flickable.DragAndOvershootBounds(default) -拖和滚都可以超出边界。
注意：滚是指在触摸屏上惯性滑动的动作。

contentHeight: real

内容尺寸的高度（表面被Flickable控制）。一般会将它设置成所有子组件在Flickable中的合并尺寸。下面的代码展示了如何用这个属性显示比视图大的图片：

importQtQuick 2.0
Flickable {
    width: 200; height: 200
    contentWidth: image.width; contentHeight:image.height
    Image { id: image; source:"bigImage.png" }
}

在一些情况下，内容的尺寸能基于contentItem的childrenRect.width和childrenRect.height属性自动设置。例如上面的代码可以重写为：

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

自动设置假设子开始于坐标(0.0)

contentItem: Item

包含在Flickable中移动组件的内部组件。在Flickable中声明的组件会自动关联父到Flickable的contentItem属性上。但动态的创建组件需要显示的指定父。例如：

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

contentWidth: real

内容尺寸的宽度（表面被Flickable控制）。参考contentHeight

contentX :real

当前Flickable视图的左上角在表面的X坐标。

contentY :real

当前Flickable视图的左上角在表面的Y坐标。

dragging :bool

视图是否由于用户拖动，正在水平、垂直或朝任何方向移动。

draggingHorizontally: bool

视图是否由于用户拖动，正在水平、垂直或朝任何方向移动。

draggingVertically: bool

视图是否由于用户拖动，正在水平、垂直或朝任何方向移动。

flickDeceleration: real

滚动的减速度，默认值依赖于平台。

flickableDirection: enumeration

能滚动的方向。
Flickable.AutoFlickDirection(default) -如果contentHeight不等于Flickable的高度，则允许垂直方向，如果contentWidth不等于Flickable的宽度，则允许水平方向。
Flickable.HorizontalFlick-允许水平方向
Flickable.VerticalFlick-允许垂直方向
Flickable.HorizontalAndVerticalFlick-允许水平和垂直方向

flicking :bool

视图是否由于用户滚动，正在水平、垂直或朝任和方向移动。

flickingHorizontally: bool

视图是否由于用户挥，正在水平、垂直或朝任和方向移动。

flickingVertically: bool

视图是否由于用户挥，正在水平、垂直或朝任和方向移动。

horizontalVelocity: real

沿着x轴和y周的瞬间移动速度，单位像素/秒。报告的速度是平滑的，以避免不稳定的输出。注意当视图有巨大的内容尺寸（是视图尺寸的10倍以上）。在连续挥的情形下，速度可以超过触摸滑过的速度。这允许用户快速通过巨大的内容。

interactive: bool

是否允许用户与Flickable交互。如果用户不能在Flickable上拖或挥，就是不交互。默认为真。
这个属性用于暂时关闭交互。这用与用户在子组件上操作。例如，我们可能在用户操作子时，冻结Flickable地图，通过探出的窗口来滚动Flickable。

leftMargin :real

左边保留的空间。

maximumFlickVelocity: real

用户能滚动的最大速度。单位像素/每秒。默认值依赖于平台。

moving :bool

视图是否由于用户拖或滚动，正在水平、垂直或朝任何方向移动。

movingHorizontally: bool

视图是否由于用户拖或滚动，正在水平、垂直或朝任何方向移动。

movingVertically: bool

视图是否由于用户拖或滚动，正在水平、垂直或朝任何方向移动。

originX :real

内容的起始的X坐标。它总是反映内容左上角的坐标，不管内容的布局方向是怎样的。它通常是(0,0)。注意ListView和GridView可以有任意的起源，这是由于具像尺寸的变化或插入删除一个可视的单元。

originY :real

pixelAligned: bool

contentX和contentY对齐到像素（true）或亚像素（false）。
打开pixelAligned能用参照边优化静止移动的内容。参照物诸如一像素宽的线，文本或矢量图。关闭pixelAligned可用于优化动画质量。默认为假。注意这不是让A内容和B内容对齐。

pressDelay :int

按动作从Flickable交付给子组件的延迟时间。这是有用的。挥和拖动都起源于鼠标按下或触摸屏触摸。而该行为如果直接交付给子组件，会产生不良影响。因为用户可能只想挥，而不是点击。所以当用户在超时前，将点击变成拖或挥的动作，点击就不会交付给子。如果在超时之前，按钮被释放，那么点击和释放都交付给子组件。
注意对于嵌套的Flickables的pressDelay属性。外层的Flickables的该属性被内层的覆盖。如果拖动超出了平台的阈值，按事件将不管这个属性设置值，直接被发射。
同时参阅QStyleHints。

rebound :Transition

这是一个过渡，用于组件实例回到flickable边界内的动画。当拖或挥内容超出flickable的边界或调用returnToBounds()时，这个过渡被触发。

importQtQuick 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

visibleArea

visibleArea.xPosition: real
visibleArea.widthRatio: real
visibleArea.yPosition: real
visibleArea.heightRatio: real
当前视图的位置和尺寸。这一般用于画scrollbar。通常，visibleArea.xPosition和visibleArea.widthRatio成对使用，visibleArea.yPosition和visibleArea.heightRatio成对使用。取值都在0.0到1.0之间。如果我们需要画一个水平的scrollbar，定义高为8像素。scrollbar的宽，就是整个视图的宽度。然后，我们需要在scrollbar中制作个滑块，用于表示当前视图是整个内容范围的哪一页。那么这个滑块的宽和位置如何确定。我们假设整个内容的宽度为100，单个视图的宽度为10。当前视图处于整个内容X轴的开始。那么，我们的滑块就应该在scrollbar的最左方，宽度应该是整个视图尺寸的十分之一。这就是我们需要显示的效果。此时，Flickable的visibleArea.xPosition为0.0，visibleArea.widthRatio的值为0.1。如果我们将视图移动到整个内容的第3页，此时visibleArea.xPosition为0.2，visibleArea.widthRatio的值为0.1。如果我们单个视图的宽度变为20，那么visibleArea.widthRatio的值变为0.2。
通过上面的说明，我们应该了解到visibleArea group就是当前视图相对整个内容，其尺寸的百分比和其位置的百分比。我们可以用这些数据，定义出我们需要设计的滑块的尺寸和位置。这个属性的使用方式如下面的代码：

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

当视图由于挥停止移动时，发射这个信号。

flickStarted()

当视图被挥时，发射这个信号。挥开始于鼠标或触摸在运动中释放时。

movementEnded()

由于用户交互，视图移动停止，发送这个信号。如果挥是生成的，这个信号将在挥停止发射，如果挥不是生成的，这个信号在用户停止拖发射。例如鼠标或触摸屏释放。

movementStarted()

由于用户交互导致视图移动时，发射这个信号。

方法说明

cancelFlick()

取消当前的滚动。

flick(qrealxVelocity, qreal yVelocity)

用水平速度xVelocity和垂直速度yVelocity挥动内容。速度单位像素/秒

resizeContent(realwidth, real height, QPointF center)

用width、height和center改变内容的尺寸。这不是缩放Flickable的内容，紧紧只是重设contentWidth和contentHeight。调整内容尺寸可能导致子组件被定位到Flickable的边界之外，调用returnToBounds()可移动内容返回边界之内。

returnToBounds()

确保内容在边界之内。这用与在手动定位内容之后，确保内容在边界内。

功能简述

在传统的用户界面，能用标准控件滚动。诸如滚动条工具和箭头按钮。在一些情形下，也可以通过按住鼠标按键并拖动鼠标来拖动视图。
而在触摸用户界面，用户一般都通过瞬间滑动提供拖动行为，如用户在触摸屏上滑动，当用户停止触摸屏幕后，此时滚动继续持续一段时间。
Flickable不会自动裁剪超出它的内容。如果不是全屏状态，我们应该设置clip属性为true。
Flickable的item将自动设置父为Flickable的contentItem。当在Flickable的item上操作时需要考虑到这个情况。