导语 作为社区公众号的第一篇技术文章,想了好久都没确定要写些什么,本来想写Qt编程快速入门Qt 5版第一篇的,因为这个系列教程好久没有更新了,而且很多网友都使用Qt 5学习老版本的教程,错误百出,现在作为第一篇更新出来也挺好的。但是转念一想,这个教程需要和老版教程相对应,第一篇需要写安装步骤什么的啊,那作为咱们这么有意义的第一篇文章实在是说不过去。所以,最后把压箱底的这个Cover Flow拿了出来,这个最早想写在《Qt 5编程入门》中的,但是不符合那本书只讲基础知识点的原则,所以就保留了下来,后面会作为一个功能模块用在《Qt及Qt Quick开发实战精解》第2版的实例中。大家可能会说,这个效果做的真的那么好,遮遮掩掩地不早放出来,呵呵,自我感觉已经达到了理想水平,先来看下效果吧! 开发环境 Win 7 + Qt 5.8.0 实现功能 如果大家了解过QML和Qt 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 }
原作者: yafeilinux
相关分类公告
可以关注我们的微信公众号yafeilinux_friends获取最新动态,或者加入QQ会员群进行交流:190741849、186601429(已满)
我知道了
|