Qt Quick包含了一组可以使用不停方式呈现数据的标准项目。
视图是一个包含条目集合的可以滚动容器，功能丰富，支持典型应用程序中的多种使用情况，而且还可以进行自定义风格和行为来满足需求。
Qt Quick基本元素提供的标注视图：
a. ListView 在水平或者垂直列表中排列条目
b. GridView 在可用空间中将条目排列在一个网格中
c. PathView 在路径上排列条目
与这些视图不同，WebView不是一个功能完整的视图项目，需要和Flickable项目一起使用来创建一个视图，实现的功能与网页浏览器相似。
1. ListView
ListView可以显示一个水平或者垂直放置条目的条目列表。ListView拥有一个模型model属性，用来定义要显示的数据，还有一个委托delegate属性，用来定义数据显示的方式。ListView默认具有探洞效果，因为它继承自Flickable项目。上一节已经多次使用过ListView元素了，那些列子中模型都是和视图定义在同一个文件的，其实模型也可以定义在一个独立的文件中，然后像一般的组件一样来使用它。
ListView中使用highlight属性可以指定当前选择项目的高亮显示。focus属性设置为true是为了确保可以使用键盘来导航列表视图。
highlight: Rectangle {color: "lightsteelblue"; radius: 5}
focus: trueContactModel.qml内容
import QtQuick 2.0
ListModel {
ListElement {
name: "Bill Smith"
number: "555 364"
}
ListElement {
name: "John Brown"
number: "555 864"
}
ListElement {
name: "Sam Wise"
number: "555 0364"
}
}import QtQuick 2.4
ListView {
width: 180; height: 200
Component {
id: contactsDelegate
Rectangle{
id: wrapper
width: 180; height: contactInfo.height
color: ListView.isCurrentItem ? "black" : "red"
Text {
id: contactInfo
text: name + ": " + number
color: wrapper.ListView.isCurrentItem ? "red" : "black" //使用wrapper
}
}
}
model: ContactModel{}
delegate: contactsDelegate
focus: true
}
a.剪裁：clip属性设置为true，默认为false
b.显示方向和显示顺序：
orientation：ListView显示方向--ListView.Horizontal<水平>；layoutDirection：Qt.LeftToRight(default)，Qt.RightToLeft
orientation：ListView.Vertical(default)<垂直>--verticalLayoutDirection：ListView.TopToBottom(default)， ListView.BottomToTop
c.添加动画
向ListView的model里添加数据时的动画model做insert或push操作。
ListView {
...
add: Transition {
NumberAnimation { properties: "x,y"; from: 100; duration: 1000}
} ListView的model里替换时的动画，model做delete或insert操作行的后边部分。
ListView {
...
addDisplaced: Transition {
NumberAnimation { properties: "x,y"; from: 100; duration: 1000}
}e.列表脚设置：
footerPositioning：ListView.InlineFooter--在ListItem下面，ListView.OverLayFooter--固定显示在可视部分的下方，可以被ListViewItem覆盖，ListView.pullBackFooter--显示在下方，拖动随ListItem画出可视区域。
f.列表头
f.列表头设置
headerPositioning：ListView.InlineHeader--在ListItem下面，ListView.OverLayHeader--固定显示在可视部分的下方，可以被ListViewItem覆盖，ListView.pullBackHeader--显示在下方，拖动随ListItem画出可视区域。
另外，ListView还提供了decrementCurrentIndex()和incrementCurrentIndex()函数来进行条目的自动滚动。
g.删除行的动画
ListView {
...
remove: Transition {
ParallelAnimation {
NumberAnimation { property: "opacity"; to: 0; duration: 1000 }
NumberAnimation { properties: "x,y"; to: 100; duration: 1000 }
}
}
}removeDisplaced: Transition {
NumberAnimation { properties: "x,y"; duration: 1000 }
}2. GridView
GridView与ListView的概念以及用法很相似。将条目排列成网格。
3. PathView
Pathview与ListView、GridView最大的不同之处在于它是一个路径(Path)上排列条目的。
import QtQuick 2.4
Rectangle {
width: 400; height: 240
color: "white"
ListModel {
id: appModel
ListElement {name: "Musice"; icon: "1.jpg"}
ListElement {name: "Movie"; icon: "2.jpg"}
ListElement {name: "Camera"; icon: "3.jpg"}
ListElement {name: "Messaging"; icon: "5.jpg"}
ListElement {name: "Contacts List"; icon: "6.jpg"}
}
Component {
id: appDelegate
Item {
id: test
width: 100; height: 100
scale: PathView.iconScale //放大缩小倍数
Image {
id: myIcon
y: 20; anchors.horizontalCenter: parent.horizontalCenter
width: 55
height: 55
source: icon
smooth: true
}
Text {
anchors{
top: myIcon.bottom
horizontalCenter: parent.horizontalCenter
}
text: name
smooth: true
color: test.PathView.isCurrentItem ? "red" : "black"
}
MouseArea {
anchors.fill: parent
onClicked: view.currentIndex = index
}
}
}
Component {
id: appHighlight
Rectangle {width: 80; height: 80; color: "lightsteelblue"}
}
PathView {
id: view
anchors.fill: parent
highlight: appHighlight
preferredHighlightBegin: 0.5
preferredHighlightEnd: 0.5
focus: true
model: appModel
delegate: appDelegate
//Path由一个或者多个路径组成，可用的路径包括PathLine、PathQuad和PathCubic
path:Path {
startX: 10
startY: 50
PathAttribute {name: "iconScale"; value: 0.5}
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}
}
onCurrentIndexChanged: {
console.log("获取pathView的当前值： " + appmodel.get(currentIndex).name)
}
}
}
Path {
startX: 0; startY: 100
PathLine {x: 200; y:100}
}Path {
startX: 20; startY: 0
PathQuad {x: 200; y:0; controlX: 100; controlY: 150}
}Path {
startX: 20; startY: 0
PathCubic {
x: 180; y:0;
control1X: -10; control1Y:90
control2X: 210; control2Y:90
}
}
Path中条目之间的空隙使用PathPercent对象来调节。
PathView {
...
Path {
startX: 20; startY: 0
PathQuad {x: 50; y: 80; controlX:0; controlY: 80}
PathLine {x: 150; y:80}
PathQuad {x: 180; y:0; controlX: 200; controlY: 80}
}
}PathView {
...
Path {startX: 20; startY: 0
PathQuad {x: 50; y: 80; controlX:0; controlY: 80}
PathPercent{value: 0.25}
PathLine {x: 150; y:80}
PathPercent{value: 0.75}
PathQuad {x: 180; y:0; controlX: 200; controlY: 80}
PathPercent {value: 1}
}
}4. WebView
WebView主要用来对网页内容进行渲染，只需要为其指定一个URL即可。在使用该元素时需要先导入QtWebKit模块。
import QtQuick 2.4
import QtWebKit 3.0
Flickable {
width: 400; height: 300
contentWidth: webView.width; contentHeight: webView.height
WebView {
id: webView
url: "http://www.baidu.com"
}
}