20.Quick QML-Flickable滑动窗口

Flickable元素继承于item元素,是一个不可视元素,它的作用是将一个较大的子项目设置在一个较小的窗口上，使得子项目的视图可以滚动。
Flickable不会自动剪裁它的内容，如果不是将它用作全屏项目，则应考虑将clip属性设置为true来隐藏超出区域的内容。
并且放置在Flickable里面的项使用anchor锚布局时,不能用id来复制,而只能用parent代替。

示例用法
以下示例显示了大图像上的小视图，用户可以在其中拖动或滑动图像以查看图像的不同部分。

Window {
    visible: true;
     400
    height: 300

    Flickable {
          anchors.fill: parent
          contentWidth: image.width; contentHeight: image.height

          Image {
              id: image
              asynchronous : true //异步加载,默认为false,如果是加载网络资源(例如HTTP)的图像,那么必须为true
              source : "http://images.cnblogs.com/cnblogs_com/lifexy/1188191/o_2.jpg"
              cache: false
              fillMode: Image.Pad
              onStatusChanged: {
                  if (image.status == Image.Error)
                  console.log("加载图片失败");
              }
          }
    }
}

其中contentWidth和contentHeight属性是用来设置可以滑动子类的实际宽高.如果不设置的话,默认为-1,那么将不能进行拖拽.
而它的contentX和contentY属性则是用来存储当前滑动的坐标位置.如果不设置的话,则默认为0,从图片的左上角开始显示
常用的属性还有:

• moving : bool,只读属性,用来获取当前视图是否在移动
• movingHorizontally : bool,只读属性,用来获取当前视图是否沿水平方向移动
• movingVertically : bool,只读属性,用来获取当前视图是否沿垂直方向移动
• flicking : bool,只读属性,获取当前视图是否在轻拂(快速滑动会产生一个加速度,当手指松开后,还会移动一会儿)
• flickingHorizontally : bool,只读属性
• flickingVertically : bool,只读属性
• visibleArea.heightRatio : real,垂直滑动条的高度比例
• visibleArea.widthRatio : real,水平滑动条的高度比例
• visibleArea.xPosition : real,水平滑动条的x坐标
• visibleArea.yPosition : real,垂直滑动条的Y坐标

添加滑动条示例如下所示:

Window {
    visible: true;
     400
    height: 300

    Flickable {
          id: flickable
          anchors.fill: parent
          contentWidth: image.width > parent.width ? image.width :  parent.width;
          contentHeight: image.height;
          boundsBehavior: Flickable.DragOverBounds
          flickDeceleration: 900
          Image {
              id: image
              asynchronous : true //异步加载,默认为false,如果是加载网络资源(例如HTTP)的图像,那么必须为true
              source : "http://images.cnblogs.com/cnblogs_com/lifexy/1188191/o_2.jpg"
              cache: false
              fillMode: Image.Pad
              onStatusChanged: {
                  if (image.status == Image.Error)
                  console.log("加载图片失败");
              }
          }
          Component.onCompleted: {

              console.log(flickDeceleration)

          }

    }

    Rectangle {
              id: yScrollbar
              anchors.right: flickable.right
               6
              y: flickable.visibleArea.yPosition * flickable.height
              height: flickable.visibleArea.heightRatio * flickable.height
              color: "#88333333"
              radius: 3
    }

    Rectangle {
              id: xScrollbar
              anchors.bottom: flickable.bottom
              height: 6
              x: flickable.visibleArea.xPosition * flickable.width
               flickable.visibleArea.widthRatio * flickable.width
              color: "#88333333"
              radius: 3
    }
}

效果如下所示: