Namespaces

Variants
Actions

Please note that as of October 24, 2014, the Nokia Developer Wiki will no longer be accepting user contributions, including new entries, edits and comments, as we begin transitioning to our new home, in the Windows Phone Development Wiki. We plan to move over the majority of the existing entries over the next few weeks. Thanks for all your past and future contributions.

QML中的Model View——一个PathView实例

From Wiki
Jump to: navigation, search
Article Metadata

代码示例
兼容于
平台:
Symbian

文章
zhouhl 在 05 Dec 2010 创建
最后由 hamishwillee 在 11 Oct 2012 编辑


Contents

引言

QML中的Model View——一个ListView实例 这篇文章为大家介绍了 QML 中的 Model View,并提供了一个 ListView 的实例,本文将在此基础上再为大家提供一个 PathView 的例子。这个例子同样也是很简单的,仅用了一百二十行的 QML 代码,在 N8 上运行的效果见下文所附图片。


PathView主要代码分析

为了简单明了,我们把所有需要的组件都写到了main.qml中。 我们一部分一部分来看一下。

    PathView {
id: view
focus: true
model: myModel
delegate: myDelegate
anchors.fill: parent
pathItemCount: 13
 
preferredHighlightBegin: 0.5
preferredHighlightEnd: 0.5
highlightRangeMode: PathView.StrictlyEnforceRange
 
flickDeceleration: 390
path: myPath
}

我们这里使用了 QML PathView Element。 与 ListView 类似,它也有需要有 Delegate 和 Model,只是说它多出了一个 Path,这是 PathView 所特有的,也是其特色所在。



下面我们看下 Path 是如何定义的:

    Path {
id: myPath
startX: 0; startY: 150
PathAttribute {name: "rotateY"; value: 50.0}
PathAttribute {name: "scalePic"; value: 0.5}
PathAttribute {name: "zOrder"; value: 1}
 
PathLine{x:180; y: 150}
PathPercent {value: 0.44}
PathAttribute {name: "rotateY"; value: 50.0}
PathAttribute {name: "scalePic"; value: 0.5}
PathAttribute {name: "zOrder"; value: 10}
 
PathQuad{x:320; y: 190; controlX: 290; controlY: 190}
PathPercent {value: 0.50}
PathAttribute {name: "rotateY"; value: 0.0}
PathAttribute {name: "scalePic"; value: 1.0}
PathAttribute {name: "zOrder"; value: 50}
 
PathQuad{x:460; y: 150; controlX: 510; controlY: 150}
PathPercent {value: 0.56}
PathAttribute {name: "rotateY"; value: -50.0}
PathAttribute {name: "scalePic"; value: 0.5}
PathAttribute {name: "zOrder"; value: 10}
 
PathLine{x:640; y: 150}
PathPercent {value: 1.00}
PathAttribute {name: "rotateY"; value: -50.0}
PathAttribute {name: "scalePic"; value: 0.5}
PathAttribute {name: "zOrder"; value: 1}
}

通俗一点讲 Path 就是 Items 所走的线路,我们画好一条线,那么所有 Items 就会沿着这条线走。这条线可以由很多段线段连接而成,线段可以使直线 PathLine,可以使二次贝塞尔曲线 PathQuad,也可以是三次贝塞尔曲线 PathCubic。

在每段线段的末尾端点,我们可以自定义一些Item的属性,这样当Item移动到这个点的时候,它就会具有我们所设置的属性。这样就给了我们很大的自由发挥空间,我们可以设置出很多我们想要的效果。
这里的属性名我们可以任意设置,在 Delegate 中是可以直接引用这些属性名的。



然后我们继续看 Delegate 是如何做的:

    Component {
id: myDelegate
 
Item{
property real tmpAngle : PathView.rotateY
property real scaleValue: PathView.scalePic
width: 340
height: 260
visible: PathView.onPath
z: PathView.zOrder
 
Image{
id:myImage
width: 340
height: 260
source: picName
anchors.horizontalCenter: parent.horizontalCenter
smooth: true
}
Image {
id: subImage
width: 340
height: 260
source: picName
anchors.horizontalCenter: parent.horizontalCenter
smooth: true
transform: Rotation { origin.x: 0; origin.y: 260; axis { x: 1; y: 0; z: 0 } angle: 180 }
}
Rectangle{
y: myImage.height;
x: -1
width: myImage.width + 1
height: myImage.height
gradient: Gradient {
GradientStop { position: 0.0; color: Qt.rgba(0,0,0, 0.7) }
}
}
 
transform:[
Rotation{
angle: tmpAngle
origin.x: 340/2
axis { x: 0; y: 1; z: 0 }
},
Scale {
xScale:scaleValue; yScale:scaleValue
origin.x: 340/2; origin.y: 260/2
}
]
}//Item
}

非常简单,画了张图片并对其进行了旋转和缩放,还做了倒影效果(由于手机性能限制,我们不能做的很精细,在 PC 机上做精细之后效果会更好)。




Model 的定义非常简单只是提供了几张图片而已,实际应用中大家可以根据自己的需要设置。

   ListModel {
id: myModel
ListElement { picName: "pics/1.png" }
ListElement { picName: "pics/2.png" }
ListElement { picName: "pics/3.png" }
ListElement { picName: "pics/4.png" }
ListElement { picName: "pics/7.png" }
ListElement { picName: "pics/8.jpg" }
ListElement { picName: "pics/9.jpg" }
ListElement { picName: "pics/10.jpg"}
ListElement { picName: "pics/5.png" }
ListElement { picName: "pics/6.png" }
}


程序截图

下面是程序在N8上面的运行效果:

QMLPathView1.JPG

QMLPathView2.JPG

QMLPathView3.JPG

QMLPathView4.JPG

QMLPathView5.JPG

下载例程

Media:QMLPathView.zip

相关链接

This page was last modified on 11 October 2012, at 01:18.
656 page views in the last 30 days.

Was this page helpful?

Your feedback about this content is important. Let us know what you think.

 

Thank you!

We appreciate your feedback.

×