Flickable
ImportStatement:import QtQuick 2.2
Inherits:Item
InheritedBy:GridView and ListView.
Properties
atXBeginning: bool
atXEnd :bool
atYBeginning: bool
atYEnd :bool
bottomMargin: real
boundsBehavior: 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
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
Signals
flickEnded()
flickStarted()
movementEnded()
movementStarted()
Methods
cancelFlick()
flick(qrealxVelocity, qreal yVelocity)
resizeContent(realwidth, real height, QPointF center)
returnToBounds()
DetailedDescription
Flickable组件可在表面放置子组件。它能拖和挥动，以促使试图上的子组件滚动。这个设计是为了实现展示巨大数目的子组件。像ListView和GridView。
在传统的用户界面，试图能用标准控件滚动。诸如卷轴工具和箭头按钮。在一些情形下，按住鼠标按键并拖动鼠标来拖动视图也是可能的。
而在触摸用户界面，拖动行为常常被用户用一霎的行为提供，如用户在触摸屏上滑动，此时滚动将在用户停止触摸屏幕后继续。
Flickable不会自动包夹它的内容。如果不用全屏的子组件，我们应该设置clip属性为真。
下面的例子战士了在一个小视图中放大图片，用户可以拖动或滑动来看图片的不同部分。
文章图片
importQtQuick 2.0
Flickable {
width: 200;
height: 200
contentWidth: image.width;
contentHeight:image.height
Image { id: image;
source:"bigImage.png" }
}
组件被作为Flickable的子宣布，将自动设置父为Flickable的contentItem。当在Flickable的子上操作时，这需要被考虑。例如附加到Flickable的绑定，对于contentItem.childrenRect是可用的。
Limitations
注意：由于实现细节，放置在Flickable中的组件不能被id锚定，使用parent替代。
PropertyDocumentation
atXBeginning: bool
flickable视图在X轴的开始位置，则为真。
atXEnd :bool
flickable视图在X轴的结束位置，则为真。
atYBeginning: bool
flickable视图在Y轴的开始位置，则为真。
atYEnd :bool
flickable视图在Y轴的结束位置，则为真。
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属性自动设置。例如上面的代码可以重写为：
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控制）。一般会将它设置成所有子组件在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属性自动设置。例如上面的代码可以重写为：
contentWidth:contentItem.childrenRect.width;
contentHeight: contentItem.childrenRect.height
自动设置假设子开始于坐标(0.0)
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
内容的起始的X坐标。它总是反映内容左上角的坐标，不管内容的布局方向是怎样的。它通常是(0,0)。注意ListView和GridView可以有任意的起源，这是由于具像尺寸的变化或插入删除一个可视的单元。
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
沿着x轴和y周的瞬间移动速度，单位像素/秒。报告的速度是平滑的，以避免不稳定的输出。注意当视图有巨大的内容尺寸（是视图尺寸的10倍以上）。在连续挥的情形下，速度可以超过触摸滑过的速度。这允许用户快速通过巨大的内容。
visibleAreagroup
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"
}
}
SignalDocumentation
flickEnded()
当视图由于挥停止移动时，发射这个信号。
flickStarted()
当视图被挥时，发射这个信号。挥开始于鼠标或触摸在运动中释放时。
movementEnded()
由于用户交互，视图移动停止，发送这个信号。如果挥是生成的，这个信号将在挥停止发射，如果挥不是生成的，这个信号在用户停止拖发射。例如鼠标或触摸屏释放。
movementStarted()
由于用户交互导致视图移动时，发射这个信号。
MethodDocumentation
cancelFlick()
取消当前的挥。
flick(qrealxVelocity, qreal yVelocity)
用水平速度xVelocity和垂直速度yVelocity挥动内容。速度单位像素/秒
resizeContent(realwidth, real height, QPointF center)
用width、height和center改变内容的尺寸。这不是缩放Flickable的内容，紧紧只是重设contentWidth和contentHeight。调整内容尺寸可能导致子组件被定位到Flickable的边界之外，调用returnToBounds()可移动内容返回边界之内。
【QML类型说明-Flickable】returnToBounds()
确保内容在边界之内。这用与在手动定位内容之后，确保内容在边界内。
