找回密码
 立即注册
  • QQ空间
  • 回复
  • 收藏

使用Qt Quick实现炫酷Cover Flow效果

yafeilinux 2017-2-6 01:20 21966人围观 yafeilinux原创


导语


    作为社区公众号的第一篇技术文章,想了好久都没确定要写些什么,本来想写Qt编程快速入门Qt 5版第一篇的,因为这个系列教程好久没有更新了,而且很多网友都使用Qt 5学习老版本的教程,错误百出,现在作为第一篇更新出来也挺好的。但是转念一想,这个教程需要和老版教程相对应,第一篇需要写安装步骤什么的啊,那作为咱们这么有意义的第一篇文章实在是说不过去。所以,最后把压箱底的这个Cover Flow拿了出来,这个最早想写在《Qt 5编程入门》中的,但是不符合那本书只讲基础知识点的原则,所以就保留下来,后面会作为一个功能模块用在《QtQt Quick开发实战精解》第2版的实例中。大家可能会说,这个效果做的真的那么好,遮遮掩掩地不早放出来,呵呵,自我感觉已经达到了理想水平,先来看下效果吧!



开发环境


Win 7 + Qt 5.8.0


实现功能


    如果大家了解过QMLQt Quick,那么一定会想到这个需要使用PathView来实现。没错,这个效果是使用PathView实现的,而且如果学习过《Qt 5编程入门》,那么实现这个功能应该不难,但是难点在于动画的处理以及那个倒影的实现。再美好的东西都是从最基本的框架完善出来的,所以,我们先从实现基本功能讲起。

    首先创建一个Qt Quick Application,然后将main.qml中的Window定义如下:

Window{

   visible:true

   width:1100; height:900

 

   ListModel{

       id:model

       ListElement{url:"qrc:/images/01.png"}

       ListElement{url:"qrc:/images/02.png"}

       ListElement{url:"qrc:/images/03.png"}

       ListElement{url:"qrc:/images/04.png"}

       ListElement{url:"qrc:/images/05.png"}

   }

 

   CoverFlow{

       anchors.fill:parent

       model:model

   }

}

       这里主要是创建了视图和模型,视图就是CoverFlow,这个使用单独文件来定义,模型中提供了5张图片,大家可以找一些漂亮的图片,然后新建一个资源文件,把它们放进去。下面重点来看下CoverFlow文件,向资源文件qml.qrc中添加新的QML File,名称设置为CoverFlow,完成后,将其中Item定义修改如下:

Item{

    id:coverFlow

 

    property ListModel model

    property int itemCount:5

 

    PathView{

       id:pathView

 

       model:coverFlow.model

       delegate:MyDelegate{}

       path:coverFlowPath

       pathItemCount:coverFlow.itemCount

       anchors.fill:parent

    }

 

    Path{

       id:coverFlowPath

       startX:0

       startY:coverFlow.height/3

 

       PathLine{x:coverFlow.width*0.5;y:coverFlow.height/3;  }

       PathPercent{value:0.50}

 

       PathLine{x:coverFlow.width;y:coverFlow.height/3;}

       PathPercent{value:1.0}

    }

}

       这里是最简单最标准的PathView的应用,设置了模型、委托以及路径,路径只是简单地进行了三等分。下面再向qml.qrc中添加一个MyDelegate.qml文件作为委托,修改其Item如下:

Item{

    id:delegateItem

    width:320

    height:450

 

    Image{

       id:dlgImg

       source:url

    }

邀请


55人点赞鲜花

2人点赞握手

雷人

路过

鸡蛋

刚表态过的朋友 (57 人)

原作者: yafeilinux

yafeilinux和他的朋友们微信公众号二维码

微信公众号

专注于Qt嵌入式Linux开发等。扫一扫立即关注。

Qt开源社区官方QQ群二维码

QQ交流群

欢迎加入QQ群大家庭,一起讨论学习!


公告
可以关注我们的微信公众号yafeilinux_friends获取最新动态,或者加入QQ会员群进行交流:190741849、186601429(已满) 我知道了