Flickable -- 内容拖拽，上下以及左右拖动进度条

Flickable：将子元素设置在可以拖动的界面上，当元素显示不全时，我们可以通过拖动查看其不同的部分。

• 属性
  
  • width：显示窗口的宽度
  • height：显示窗口的高度
  • contentWidth：可拖拽的宽度
  • contentHeight：可拖拽的高度
  • clip：true大于显示窗口的部分被隐藏，可以通过拖动来显示未显示的部分。
  • visibleArea：可视区域
    
    • heightRatio：可视窗口高度占整个视图高度(height)的百分比
    • yPosition：可视窗口y方向位置占整个视图高度(height)的百分比
    • widthRatio：可视窗口宽度占整个视图高度(width)的百分比
    • xPosition：可视窗口x方向位置占整个视图宽度(width)的百分比

大于窗口的内容被隐藏

import QtQuick 2.5
import QtQuick.Window 2.2

Window {
    minimumWidth: 1280
    minimumHeight: 960
    visible: true

    Flickable{
        width:              400
        height:             400
        contentWidth:       image.width
        contentHeight:      image.height
        clip:               true

        Image {
            id: image
            source: "Garland.jpg"
        }
    }
}

对窗体显示添加进度条

import QtQuick 2.5
import QtQuick.Window 2.2

Window {
    minimumWidth: 1280
    minimumHeight: 960
    visible: true

    //-----------------------------------------
    Rectangle{
        width:              600
        height:             600
        anchors.top:        parent.top
        anchors.left:       parent.left
        anchors.leftMargin: parent.width / 2 - image.width / 2
        anchors.topMargin:  parent.height / 2 - image.height / 2


        Flickable{
            id:                 flick
            width:              400
            height:             400
            contentWidth:       image.width
            contentHeight:      image.height
            clip:               true

            Image {
                id: image
                source: "Garland.jpg"
            }
        }

        Rectangle{
            anchors.right:      flick.right
            width:              8
            height:             flick.visibleArea.heightRatio * flick.height
            y:                  flick.visibleArea.yPosition * flick.height
            color:              "gray"
        }

        Rectangle{
            anchors.bottom:     flick.bottom
            height:              8
            width:             flick.visibleArea.widthRatio * flick.width
            x:                  flick.visibleArea.xPosition * flick.width
            color:              "gray"
        }
    }
    //-------------------------------------------------------------------
}