QML Flickable 元素基本介绍

注意：由于一个实现的细节，放置在Flickable里面的项不能用id来anchor，而用parent代替。
----------------------------------------
Flickable 元素继承自Item，被ListView和GridView继承


Flickable提供一个较小的视窗来显示一个较大的内容给用户，并且用户可以对改内容进行拖拽和轻拂。


接下来为大家说明一下Flickable 的一些常用属性


-------------------------------------------
contentHeight : real
contentWidth : real
height
width
contentHeight 和contenWidth的值为实数，表示的显示内容的大小
height和width是视窗的大小。


----------------------------------------
contentItem : Item read-only
The internal item that contains the Items to be moved in the Flickable.
Items declared as children of a Flickable are automatically parented to the Flickable's contentItem.
Items created dynamically need to be explicitly parented to the contentItem.


------------------------------------------
contentX : real
contentY : real
这个属性返回内容被轻拂时，x,y方向（相对视窗左上角那个点）的位移。
例如，如果你把图片垂直挪动100像素点，则contentY的值将变为100


---------------------------------------------
flicking : bool
flickingHorizontally : bool
flickingVertically : bool
这三个为只读属性，返回当前视窗下，内容是否被轻拂（轻弹），如果有，flicking返回true，
如果是沿竖直方向对内容操作，则 flickingVertically 返回true， flickingHorizontally 返回false
如果是沿水平方向对内容操作，则 flickingHorizontally 返回true， flickingVertically 返回false


-----------------------------------
horizontalVelocity : real
verticalVelocity : real


这两个是只读属性，放回当前视窗下，内容被轻拂（轻弹）时，x，y方向的速度，单位是秒每像素点


-----------------------------------
maximumFlickVelocity : real
这个属性可以限定当前视窗下，内容被轻拂的最大速度，由实现平台限定默认值


----------------------------------
moving : bool
movingHorizontally : bool
movingVertically : bool
这三个为只读属性，返回当前视窗下，内容是否被拖动，如果有， moving 返回true，
如果是沿竖直方向对内容操作，则 movingVertically 返回true， movingHorizontally 返回false
如果是沿水平方向对内容操作，则 movingHorizontally 返回true， movingVertically 返回false


------------------------------------------------
用来做滚动条的
visibleArea.heightRatio : real
visibleArea.widthRatio : real
visibleArea.xPosition : real
visibleArea.yPosition : real
这四个为只读属性
这些属性描述的是当前视窗下，内容的区域的位置和大小
visibleArea.heightRatio = height / contenHeight 比例
visibleArea.widthRatio  = width / contentWidth 比例
visibleArea.xPosition = 
visibleArea.yPosition = 


还是看个实例吧

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

---------------------------------------------------------
atXBeginning : bool
atXEnd : bool
atYBeginning : bool
atYEnd : bool
这些属性都为真，如果视窗的内容刚好与视窗大小相符
These properties are true if the flickable view is positioned at the beginning, or end respecively.


------------------------------------------
flickDeceleration : real
让轻拂或拖动的速率减慢


---------------------------------------
flickableDirection : enumeration
这个属性决定当前视窗的内容可以被操作的方向
This property determines which directions the view can be flicked.


Flickable.AutoFlickDirection (default) - 自动确定
Flickable.HorizontalFlick - 只允许水平操作
Flickable.VerticalFlick - 只允许垂直操作
Flickable.HorizontalAndVerticalFlick - 运行水平和垂直方向的操作


-----------------------------------------------
pressDelay : int


这个属性设置一个毫秒来延迟一个按钮到达视窗内的子项
This property holds the time to delay (ms) delivering a press to children of the Flickable. 
这可能是有用的,反应前的新闻一闪的行动有着不良的影响。
This can be useful where reacting to a press before a flicking action has undesirable effects.
这可能是有用的，因为在响应一个按钮之前，一个轻拂动作会导致不良的效果


---------------------------------------------------
interactive : bool
这个属性描述用户能否与当前视窗进行交互。当视窗不能进行交互（属性值为false），用户不能拖或者轻弹视窗内容
通常，这个属性的值为真


------------------------------------------------
boundsBehavior : enumeration
这个属性记录了当前视窗内容的大小超过了视窗的边界还是轻拂时越过视窗边界。
这使得边界实现羽化和柔和
boundsBehavior 可能是下面其中一个


Flickable.StopAtBounds - 内容不能被拖出视窗边界，轻拂时内容也不会超出视窗边界
Flickable.DragOverBounds - 内容能被拖出视窗边界，轻拂时内容也不会超出视窗边界
Flickable.DragAndOvershootBounds (default) - 内容能被拖出视窗边界，轻拂时内容会超出视窗边界


-----------------------------------------
contentItem : Item


交互项被包含进视窗，能被操作移动
交互项被声明为视窗的子，被自动添加到视窗的contentItem属性中去


Items created dynamically need to be explicitly parented to the contentItem:

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

 
--------------------------------------


*******************************************
信号处理器
-------------------------------------
onFlickEnded
当视窗内容被轻拂后停止，触发
This handler is called when the view stops moving due to a flick.


-------------------------------------
onFlickStarted
当视窗内容刚被被轻拂时，触发


This handler is called when the view is flicked. 


A flick starts from the point that the mouse or touch is released, while still in motion.
onFlickStarted




--------------------------------------
onMovementEnded
当视窗内容停止移动时，触发
This handler is called when the view stops moving due to user interaction. 
如果是轻拂，则这个信号处理器将在 轻拂之后停止滑动 被触发
If a flick was generated, this handler will be triggered once the flick stops. 
如果不是轻拂，当用户停止拖拽时被触发
If a flick was not generated, the handler will be triggered when the user stops dragging - i.e. a mouse or touch release.


--------------------------------------------
onMovementStarted
视窗内容刚被操作时触发
This handler is called when the view begins moving due to user interaction.




****************************************
This documentation is under development and is subject to change.
方法文档
-------------------------------------------------
Flickable::resizeContent ( real width, real height, QPointF center )
用于重置视窗内容尺寸


重置视窗内容尺寸会导致内容超过视窗的边界，使用returnToBounds() 函数可以修复内容的边界到一个合法的范围


------------------------------------------------------
Flickable::returnToBounds ()


使用returnToBounds() 函数可以修复内容的边界到一个合法的范围