Flickable(弹动)
QML中提供了一个Flickable元素,可以将其子项设置在一个可以拖拽和弹动的界面上,使得子项目的视图可以滚动。在传统的用户界面中,可以使用标准控件(如滚动条和箭头按钮)滚动视图。在某些情况下,还可以通过在移动光标的同时按住鼠标按钮来直接拖动视图。在基于触摸的用户界面中,此拖动操作通常与轻拂操作相辅相成,在用户停止触摸视图后,滚动将继续。
常用属性:
contentWidgth contentWidgth | 内容的尺寸(由 Flickable 控制的表面)。这通常应设置为放置在可轻拂中的项目的组合大小 |
OriginX OriginY | 属性保存内容的来源,一般为(0.0) |
contentX contentY | 属性将表面坐标当前保存在可轻拂的左上角,如果将图像向上轻拂 100 像素,将增加 100,一般为(0.0) |
moving movingHorizontally movingVertically | 属性描述由于用户拖动或轻拂视图而导致视图当前是水平、垂直还是在任一方向上移动 |
dragging draggingHorizontally draggingVertically | 属性描述由于用户拖动视图而导致视图当前是水平、垂直还是任一个方向移动。 |
flicking flickingHorizontally flickingVertically | 属性描述由于用户轻拂视图而导致视图当前是水平、垂直还是任任一方向移动 |
horizontalVelocity verticalVelocity | 沿 x 轴和 y 轴的瞬时运动速度 |
boundsBehavior | 属性保存图面是可以拖动到可轻拂对象的边界之外,还是在轻拂时超过可轻拂的边界 |
boundsMovement | 保存可轻拂对象是否将给人一种视图边缘柔和的感觉,而不是硬物理边界 |
contentItem | 轻拂的项目 |
flickDeceleration | 轻拂减速的速率,数字越大,当用户停止通过触摸、触摸板或鼠标滚轮轻拂时,它的速度就越快 |
horizontalOvershoot | 保存水平过冲,即内容被拖动或轻拂超过可轻拂边界的水平距离 |
verticalOvershoot | 保存垂直过冲,即内容被拖动或轻拂超过可轻拂边界的垂直距离 |
interactive | 描述用户是否可以与可轻拂对象交互。用户无法拖动或轻拂非交互式的可轻拂对象。 默认情况下,此属性为 true。 |
maximumFlickVelocity | 可以轻拂视图的最大速度 |
pixelAligned | 像素对齐 |
rebound | 留在内容视图回弹到可轻拂对象的边界时应用于内容视图的过渡 |
boundsBehavior:enumeration(边界行为)
Flickable.StopAtBounds | 内容不能拖动到可轻拂的边界之外,并且轻拂不会超调 |
Flickable.DragOverBounds | 内容可以拖动到可轻拂的边界之外,但轻拂不会超调 |
Flickable.OvershootBounds | 轻拂时内容可以超过边界,但内容不能拖动到可轻拂边界之外 |
Flickable.DragAndOvershootBounds | 内容可以拖动到可轻拂的边界之外,并且在轻拂时可以超过边界 |
boundsMovement:enumeration(边界移动)
Flickable.StopAtBounds | 这允许实现自定义边缘效果,其中内容不跟随拖动或轻拂超出可轻拂边界。水平过冲和垂直过冲的值可用于实现自定义边缘效果。 |
Flickable.FollowBoundsBehavior (default) | 内容是跟随拖动还是超出可轻拂边界的轻拂由 boundsBehavior确定 |
flickableDirection:enumeration(轻拂方向)
Flickable.AutoFlickDirection(默认) | 如果 contentHeight 不等于可轻拂的高度,则允许垂直轻拂。如果内容宽度不等于可轻拂的宽度,则允许水平轻拂。 |
Flickable.AutoFlickIfNeed | 如果 contentHeight 大于 Flickable 的高度,则允许垂直轻拂。如果内容宽度大于可轻拂的宽度,则允许水平轻拂 |
Flickable.HorizontalFlick | 允许水平轻拂 |
Flickable.VerticalFlick | 允许垂直轻拂 |
Flickable.HorizontalAndVerticalFlick | 允许双向轻拂 |
visibleArea(可见区域)
这些属性描述当前查看区域的位置和大小。大小定义为当前可见的完整视图的百分比,缩放为 0.0 - 1.0。页面位置通常在 0.0(开始)到 1.0 减去大小比(结束)的范围内,即 在 0.0 到 1.0-的范围内。但是,内容可能会拖到正常范围之外,从而导致页面位置也超出正常范围。这些属性通常用于绘制滚动条
visibleArea.heightRatio | 高度比 |
visibleArea.widthRatio | 宽度比 |
visibleArea.xPosition | x位置 |
visibleArea.yPosition | y位置 |
信号:
flickEnded() | 视图因轻弹而停止移动时,会发出此信号 |
flickStarted() | 当视图被轻拂时,会发出此信号 |
movementEnded() | 视图由于用户交互或生成的 flick()而停止移动时,将发出此信号。如果轻拂处于活动状态,则一旦轻拂停止,就会发出此信号。如果轻拂未处于活动状态,则当用户停止拖动时将发出此信号 - 即鼠标或触摸释放。 |
movementStarted() | 视图由于用户交互或生成的flick() 而停止移动时,将发出此信号。如果轻拂处于活动状态,则一旦轻拂停止,就会发出此信号。如果轻拂未处于活动状态,则当用户停止拖动时将发出此信号 - 即鼠标或触摸释放。 |
函数:
cancelFlick() | 取消当前轻拂动画 |
flick(qreal xVelocity, qreal yVelocity) | 以像素/秒为单位水平轻拂 xVelocity 和垂直 yVelocity 轻拂内容。 调用此方法将更新相应的移动和轻弹属性和信号,就像真正的轻弹一样。 |
resizeContent() | 调整大小内容 |
returnToBounds() | 返回边界,确保内容在规定范围内 |
简单的创建一个Flickable:
Flickable {
anchors.fill:parent
contentWidth: image.width; contentHeight: image.height//设置可浮动的内容尺寸
Image {
id: image;
source: "qrc:/image/5a01c793cad612fd15711845.png"
}
}
如果只在一个区域中显示 的话,把clip设置为true
Rectangle{
id:rect1
width: 600
height: 600
Flickable {
anchors.fill:parent
contentWidth: image.width; contentHeight: image.height
Image {
id: image;
source: "qrc:/image/5a01c793cad612fd15711845.png"
}
clip: true
}
}
添加右侧和底部滑块
Rectangle{
id:rect1
width: 600
height: 600
Flickable {
id:flickable1
anchors.fill:parent
contentWidth: image.width; contentHeight: image.height
Image {
id: image;
source: "qrc:/image/5a01c793cad612fd15711845.png"
}
clip: true
}
//右侧滑块
Rectangle{
id:scrollbar
anchors.right: flickable1.right //设置位置
y:flickable1.visibleArea.yPosition*flickable1.height
width: 10 //设置滑块宽度
height: flickable1.visibleArea.heightRatio*flickable1.height
color: "black" //设置滑块颜色
}
//底部滑块
Rectangle{
id:scrollbar1
anchors.bottom:flickable1.bottom
x:flickable1.visibleArea.xPosition*flickable1.height
height: 10
width: flickable1.visibleArea.widthRatio*flickable1.width
color: "black"
}
}
rebound 反弹的使用,当拖动后返回时,遇到边界会有反弹效果
Flickable {
width: 150; height: 150
contentWidth: 300; contentHeight: 300
rebound: Transition { //设置反弹效果
NumberAnimation {
properties: "x,y"
duration: 1000
easing.type: Easing.OutBounce
}
}
Rectangle {
width: 300; height: 300
gradient: Gradient {
GradientStop { position: 0.0; color: "lightsteelblue" }
GradientStop { position: 1.0; color: "blue" }
}
}
}
Flipable(翻转)
翻转是一种可以在正面和背面之间明显“翻转”的物品,就像卡片一样。它可以与旋转、状态和过渡类型一起使用以产生翻转效果。
属性:
front | 正面 |
back | 反面 |
side | 可翻转的一侧当前可见 Flipable.front Flipable.back |
例子;设置正反面,并旋转360°
Flipable{
id:flipable1
x:200;y:200
width: 400;height: 400
property bool flipped: false //判断是否翻面
front: Image{id:image1;source:"qrc:/image/apic26488.jpg"}//正面
back:Image {id: image2;source: "qrc:/image/zzpic23859.jpg"}//反面
transform: Rotation { //设置旋转的轴
id:rotation
origin.x:flipable1.width/2
origin.y:flipable1.height/2
axis{x:0;y:1;z:0}
angle:0
}
states:State{ //设置状态
name:"back"
PropertyChanges {target: rotation;angle:360}
when:flipable1.flipped
}
transitions: Transition { //设置过渡
NumberAnimation{
target: rotation
property: "angle"
duration: 5000
}
}
MouseArea{
anchors.fill:parent
onPressed: {
flipable1.flipped=!flipable1.flipped
}
}
}
参考资料: