1. 弹动效果Flickable
QML中提供了一个Flickable元素,它可以将其子项目设置在一个可以拖曳和弹动的界面上,使得子项目的视图可以滚动。Flickable不会自动剪裁它的内容,如果不是将它用作全屏项目,可以将clip属性设置为true来隐藏超出区域的内容。
import QtQuick 2.4
//小视图显示大图片,拖动查看图片
Flickable {
anchors.left: parent.left
anchors.top: parent.top
width: 100; height: 100
contentWidth: image.width; contentHeight: image.height
Image {id: image; source: "1.jpg"}
}
只在一个区域中显示Flickable元素,设置clip属性,让其不在指定区域外显示。
import QtQuick 2.4
//小视图显示大图片,拖动查看图片
Rectangle {
width: 500; height: 500
color: "black"
Flickable {
anchors.centerIn: parent
width: 100; height: 100
contentWidth: image.width; contentHeight: image.height
clip: true
Image {id: image; source: "1.jpg"}
}
}
Flickable中显示滚动条,通过visibleArea属性实现,这个属性分为visibleArea.xPosition、visibleAea.widthRatio、visibleArea.yPosition和visibleArea.heightRatio,这些都是只读属性,描述当前可视区域的位置和大小。大小被定义为当前可视窗口占整个视图的百分比,从0.0~1.0。页面位置一般是从0.0到1.0减去大小比。例如yPosition的范围是0.0~1.0-heightRatio。然而,内容可以拖曳到正常的范围之外,所以页面位置也可能在正常范围之外。
import QtQuick 2.4
//小视图显示大图片,拖动查看图片
Rectangle {
width: 500; height: 500
// color: "black"
Flickable {
id: flickable
width: 100; height: 300
// anchors.centerIn: parent
contentWidth: image.width; contentHeight: image.height
clip: true
Image {id: image; source: "1.jpg"}
}
Rectangle {
id: scrollbar
anchors.right: flickable.right
y: flickable.visibleArea.yPosition * flickable.height
width: 10
height: flickable.visibleArea.heightRatio * flickable.height
color: "black"
}
}
禁用拖动弹动功能:interactive = false
Qt中有例子(scrollbar example)--滚动条
2. 翻转效果Flipable
Flipable是一个可以明显在其正面和反面之间进行翻转的项目,就像一张卡片。同时使用Rotation、State和Transition等元素来产生翻转效果。front和back分别用来保存要显示在Flipable项目的正面和反面的项目。Flipable有一个flipped布尔值属性,每当在Flipable中的MouseArea上单击鼠标时都会切换该属性的值。当flipped为true时,项目变为back状态,在这个状态,Rotation的angle属性改变为180°来产生一个翻转效果。当flipped为false时,项目恢复到默认状态,这时angle的值为0。
import QtQuick 2.4
Flipable {
id: flipable
width: 240; height:240
property bool flipped: false
//正面、反面图片资源
front: Image{source: "1.jpg"; anchors.centerIn: parent}
back: Image{source: "2.jpg"; anchors.centerIn: parent}
transform: Rotation {
id: rotation
origin.x: flipable.width / 2
origin.y: flipable.height / 2
axis.x: 0; axis.y: 1; axis.z: 0
angle: 0
}
states: State {
name: "back"
PropertyChanges { target: rotation; angle: 180 } //翻转效果
when: flipable.flipped
}
transitions: Transition {
NumberAnimation {target: rotation; property: "angle"; duration: 800}
}
MouseArea {
anchors.fill: parent
onClicked: flipable.flipped = !flipable.flipped
}
}