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