QmloverFlow用于滚动浏览显示图片,效果如下
代码如下:CoverFlow.qml,FrmCoverFlow.qml,MyDelegate.qml
import QtQuick 2.0
import "./"
Rectangle {
id: coverFlow
color:"black"
property ListModel model
property int itemCount: 5
PathView{
id: pathView
model: coverFlow.model
delegate: MyDelegate{}
path: coverFlowPath
pathItemCount: coverFlow.itemCount
anchors.fill: parent
preferredHighlightBegin:0.5
preferredHighlightEnd:0.5
}
Path{
id: coverFlowPath
startX: 0
startY: coverFlow.height/3
PathAttribute{ name:"iconZ"; value:0 }
PathAttribute{ name:"iconAngle"; value:70 }
PathAttribute{ name:"iconScale"; value: 0.6 }
PathLine{ x:coverFlow.width*0.5; y:coverFlow.height/3; }
PathAttribute{ name:"iconZ"; value:100 }
PathAttribute{ name:"iconAngle"; value:0 }
PathAttribute{ name:"iconScale"; value:1.0 }
PathLine{ x: coverFlow.width; y:coverFlow.height/3 }
PathAttribute{ name:"iconZ"; value: 0 }
PathAttribute{ name:"iconAngle"; value:-70 }
PathAttribute{ name:"iconScale"; value:0.6 }
PathPercent{ value: 1.0 }
}
}
import QtQuick 2.5
import QtQuick.Window 2.2
import QtQuick.Controls 1.4
import QtQuick.Controls.Styles 1.4
Item {
id: root
visible: true
width: 640
height: 480
ListModel{
id: model
ListElement{url:"./images/01.jpg"}
ListElement{url:"./images/02.png"}
ListElement{url:"./images/03.jpg"}
ListElement{url:"./images/04.jpg"}
ListElement{url:"./images/05.jpg"}
}
Rectangle{
id: zhanwei
anchors.left: parent.left
width: root.width
height: root.height/5
visible:false
}
/*预计用来显示景区信息*/
CoverFlow{
id: coverFlow
anchors.left: parent.left
anchors.top: zhanwei.bottom
anchors.topMargin: 10
anchors.right: parent.right
width: root.width
height: root.height*2/5
visible: true
model:model
}
}
import QtQuick 2.0
Item {
id: delegateItem
width: 320
height: 450
z: PathView.iconZ
scale: PathView.iconScale
Image{
id: dlgImg
source: url
width:delegateItem.width
height:delegateItem.height
}
transform:Rotation{
origin.x: dlgImg.width/2.0
origin.y: dlgImg.height/2.0
axis{ x:0; y:1; z:0 }
angle:delegateItem.PathView.iconAngle
}
}