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

╰+哭是因爲堅強的太久メ 2022-05-25 12:14 265阅读 0赞

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