实现滚动条功能:
- <span style="font-family:Comic Sans MS; font-size:18px">import QtQuick 2.0
- Rectangle
- {
- width: 480
- height: 320
- color: "blue"
- Flickable
- {
- id: flick
- width: 300
- height: 200
- //可拖拽内容大小
- contentWidth: image.width
- contentHeight: image.height
- //隐藏大于显示窗口的部分
- clip: true;
- Image
- {
- id: image
- source: "pics/1.jpg"
- }
- }
- //竖滚动条
- Rectangle
- {
- id: scrollbar_vertical
- anchors.right: flick.right
- //当前可视区域的位置.为百分比值,0-1之间
- y: flick.visibleArea.yPosition * flick.height
- width: 10
- //当前可视区域的高度比例,为百分比值,0-1之间
- height: flick.visibleArea.heightRatio * flick.height
- color: "black"
- }
- //横滚动条
- Rectangle
- {
- id: scrollbar_horizontal
- anchors.bottom: flick.bottom
- //当前可视区域的位置.为百分比值,0-1之间
- x: flick.visibleArea.xPosition * flick.width
- height: 10
- //当前可视区域的宽度比例,为百分比值,0-1之间
- width: flick.visibleArea.widthRatio * flick.width
- color: "black"
- }
- }
- </span>
可以实现翻转效果
- import QtQuick 2.0
- Flipable
- {
- id: flip
- width: 300
- height: 200
- //定义属性
- property bool flipped: false
- //正面图片
- front:Image
- {
- source: "pics/1.jpg"
- anchors.centerIn: parent
- }
- //背面图片
- back:Image
- {
- source: "pics/2.jpg"
- anchors.centerIn: parent
- }
- //旋转设置,延Y轴旋转
- transform: Rotation
- {
- id: rotation
- origin.x:flip.width / 2
- origin.y:flip.height / 2
- axis.x: 0
- axis.y: 1
- axis.z: 0
- angle: 0
- }
- //状态改变
- states:State
- {
- name: "back"
- PropertyChanges
- {
- target: rotation;angle:180
- }
- when:flip.flipped
- }
- //转换方式
- transitions: Transition
- {
- NumberAnimation
- {
- target:rotation
- properties: "angle"
- duration:4000
- }
- }
- //鼠标区域
- MouseArea
- {
- anchors.fill: parent
- onClicked: flip.flipped = !flip.flipped
- }
- }