发帖 回复
返回列表
  • 4256阅读
  • 0回复

[原创]qml中的Flickable，Flipped元素 [复制链接]

 上一主题 下一主题
离线seanyxie
新手上路
 
只看楼主 倒序阅读 楼主  发表于: 2014-07-15
qml中的Flickable，Flipped元素

qml中提供的Flickable元素，使得可以在qml中提供一个可以拖拽和弹动的元素，手持触摸设备和传动的pc不一样，传统的视图单位通过滚动条或者上下按钮来滚动视图，这种方法用在触摸设备，交互必然会不太方便。

Flickable元素的clip属性可以设置为true,来使它不加载超出它区域的内容，如下代码
复制代码
  1. Flickable{
  2.         width: 200
  3.         height:200
  4.         clip:true
  5.         contentHeight: image.height
  6.         contentWidth: image.width
  8.         Image{
  9.             id:image
  10.             source: "qrc:///images/images/IPXG2879.JPG"
  11.         }
  13.     }



image里现实的图片非常大，可以通过拖动正方形区域的地方，来查看图片其他地方，如果clip属性不设置或者设置为false，则会全部加载，包括image超出区域的地方。



Flipable提供一个可以翻转的元素，像一个卡片一样，可以通过同时使用Rotation，State,Transition来使他旋转。front和back分别表示其正面和反面。

代码：

复制代码
  1. Flipable{
  2.         id:flipitem
  3.         width:200
  4.         height:200
  6.         property bool flipped: false
  7.         front: Image {
  8.             source: "qrc:///images/images/front.png"
  9.             anchors.centerIn: parent
  10.         }
  11.         back:Image{
  12.             source:"qrc:///images/images/back.png"
  13.              anchors.centerIn: parent
  14.         }
  16.         transform: Rotation{
  17.             id:transform
  18.             origin.x:flipitem.width/2
  19.             origin.y:flipitem.height/2
  20.             axis.x:0
  21.             axis.y:1
  22.             axis.z:0
  23.             angle:0
  24.         }
  26.         states:State{
  27.             name:"back"
  28.             PropertyChanges {
  29.                 target: transform.angle
  30.                 angle:180
  31.             }
  32.         }
  34.         transitions: Transition {
  35.             NumberAnimation {
  36.                 target:transform
  37.                 duration:400
  38.             }
  40.         }
  42.         MouseArea{
  43.             anchors.fill: parent
  44.             onClicked: {
  45.                 flipitem.flipped=!flipitem.flipped
  46.                 if(flipitem.flipped)
  47.                     flipitem.state="back"
  48.                 else
  49.                     flipitem.state=""
  50.             }
  51.         }
  53.     }
我奔向太阳，在日落前必将找到你。
欢迎光临Qt技术博客 http://www.seanyxie.com
回复
举报
分享到 淘江湖 新浪 QQ微博 QQ空间 开心 人人 豆瓣 网易微博 百度 鲜果 白社会 飞信
发帖 回复
返回列表
快速回复
限100 字节
 
上一个 下一个