import QtQuick 2.0
Item {
width: 200
height: 200
//ListView 在水平或垂直列表中排列条目
ListModel {
id: myModel
ListElement {type: "dog"; age: 8}
ListElement {type: "cat"; age: 5}
}
Component {
id: myDelegate
Text {text: type + "," + age}
}
ListView {
model: myModel
delegate: myDelegate
}
//<rss>
// <channel>
// <item>
// <title type="titleType">title</title>
// <link>link</link>
// <description>description</description>
// </item>
// </channel>
//</rss>
//query 指定了这个XmlListModel应该从该xml文档的每一个<item>创建一个模型条目
//XmlRole对象定义了模型条目的属性,还有指定值的类型,如字符串使用string(), 数值使用number()
//如果要查询一个元素的属性,比如title的type属性,就在type前加@标志, query: "@type/string()"
XmlListModel {
id: feedModel
source: "http://www.mysite.com/rss/feed.xml"
query: "/rss/channel/item"
XmlRole {name: "title"; query: "title/string()"}
XmlRole {name: "link"; query: "link/string()"}
XmlRole {name: "description"; query: "description()"}
}
ListView {
model: feedModel
delegate: Column {
Text {text: title}
Text {text: link}
Text {text: description}
}
}
// VisualItemModel允许使用QML项目作为模型
VisualItemModel {
id: itemModel
Rectangle {width: 80; height: 100; color: "red"}
Rectangle {width: 80; height: 100; color: "green"}
Rectangle {width: 80; height: 100; color: "blue"}
}
//GridView在可用空间中将条目排列在一个网格中
//PathView在路径上排列条目
ListModel {
id: pathModel
ListElement {name: "Music"; icon: "music.png"}
ListElement {name: "Movies"; icon: "movies.png"}
ListElement {name: "Camera"; icon: "camera.png"}
ListElement {name: "Calendar"; icon: "calendar.png"}
ListElement {name: "Messaging"; icon: "messaging.png"}
ListElement {name: "ToDoList"; icon: "to_do_list.png"}
ListElement {name: "Contacts"; icon: "contacts.png"}
}
Component {
id: pathDelegate
Item {
width: 100
height: 100
scale: PathView.iconScale
Image {
id: myIcon
y: 20
source: icon
smooth: true
}
Text {
anchors.top: myIcon.bottom
text: name
smooth: true
}
MouseArea {
anchors.fill: parent
onClicked: pathView.currentIndex = index
}
}
}
Component {
id: pathHighlight
Rectangle {width: 80; height: 80; color: "lightsteelblue"}
}
PathView {
id: pathView
highlight: pathHighlight
preferredHighlightBegin: 0.5
preferredHighlightEnd: 0.5
focus: true
model: pathModel
delegate: pathDelegate
// 一个Path由一个或多个路径段组成,可以路径包括PathLine, PathQuard, PathCubic
path: Path {
startX: 10
startY: 50
//PathAttribute对象允许在路径上的多个点指定由名称和值组成的属性
//这些属性可以作为附加属性在委托中使用
//本例中,指定了一个iconScale属性,分别在路径的两端和中间部分指定了其缩放值
//中间图片大小正常,两边图片缩小一半,其缩放值在0.5和1.0间线性变化
PathAttribute {name: "iconScale"; value: 0.5}
// PathQuad 定义了包含一个控制点的二次贝塞尔曲线
PathQuad {x: 200; y: 150; controlX: 50; controlY: 200}
PathAttribute {name: "iconScale"; value: 1.0}
PathQuad {x: 390; y: 50; controlX: 350; controlY: 200}
PathAttribute {name: "iconScale"; value: 0.5}
// PathLine定义了一条直线,可以以一条直线到达指定的位置
PathLine {x: 200; y: 100}
//PathCubic定义了一个具有两个控制点的三次贝塞尔曲线
PathCubic {x: 180; y: 0; control1X: -10; control1Y: 90; control2X: 210; control2Y: 90}
//PathPercent用来调节Path中路径之间的空隙
PathPercent {value: 1}
}
}
//WebView用来渲染网页
}