在QML应用中使用VisualItemModel让QML Item成为model来显示数据

VisualItemModel可以让我们把QML Item变为我们的ListView的Model成为可能。这个Model可以既含有数据（data)也可以含有delegate。VisualItemModel含有的Item提供可以用来画数据内容的delete。这个Model不提供任何roles，也就是说我们不可以使用任何“model.xxxx”来引用我们的model数据。VisualItemModel适合于ListView中的每个delegate显示的情况都不太一样的情况，但是，我们可以照样使用ListView来显示我们的数据，并使用ListView的特性来展示并scroll数据。更多阅读ObjectModel。我们可以使用ObjectModel来代替VisualItemModel来实现同样的事情。

一个简单的例程如下：

Page {
title: i18n.tr("VisualItemModel")

VisualItemModel {
id: itemModel
Rectangle { height: view.height/3; width: view.width; color: "red" }
Rectangle { height: view.height/3; width: view.width; color: "green" }
Rectangle { height: view.height/3; width: view.width; color: "blue" }
}

ListView {
id: view
anchors.fill: parent
model: itemModel
}

}

代码：https://github.com/liu-xiao-guo/visualitemmodel1

我们的另外一个例程代码展示如下：

Main.qml

import QtQuick 2.0
import Ubuntu.Components 1.1

/*!
\brief MainView with a Label and Button elements.
*/

MainView {
// objectName for functional testing purposes (autopilot-qt5)
objectName: "mainView"

// Note! applicationName needs to match the "name" field of the click manifest
applicationName: "visualitemmodel.liu-xiao-guo"

/*
This property enables the application to change orientation
when the device is rotated. The default is false.
*/
//automaticOrientation: true

// Removes the old toolbar and enables new features of the new header.
useDeprecatedToolbar: false

width: units.gu(60)
height: units.gu(85)

Page {
title: i18n.tr("visualitemmodel")

Rectangle {
color: "lightgray"
anchors.fill: parent

VisualItemModel {
id: itemModel

Rectangle {
width: view.width; height: view.height - footer.height
color: "#FFFEF0"
Text { text: "Page 1"; font.bold: true; anchors.centerIn: parent }
}

Rectangle {
width: view.width; height: view.height - footer.height
color: "#F0FFF7"
Text { text: "Page 2"; font.bold: true; anchors.centerIn: parent }
}

Rectangle {
width: view.width; height: view.height - footer.height
color: "#F4F0FF"
Text { text: "Page 3"; font.bold: true; anchors.centerIn: parent }
}
}

UbuntuListView {
id: view
anchors { fill: parent; bottomMargin: 30 }
model: itemModel
preferredHighlightBegin: 0; preferredHighlightEnd: 0
highlightRangeMode: ListView.StrictlyEnforceRange
orientation: ListView.Horizontal
highlightMoveVelocity : 5000
snapMode: ListView.SnapOneItem
highlightMoveDuration: 1000
flickDeceleration: 2000
Component.onCompleted: {
console.log("velocity: " + view.horizontalVelocity)
console.log("highlightMoveDuration: " + view.highlightMoveDuration)
}
}
}

Row {
id: footer
anchors { bottom: parent.bottom }
anchors.bottomMargin: units.gu(1)
// anchors.centerIn: parent
anchors.horizontalCenter: parent.horizontalCenter
spacing: units.gu(4)
height: units.gu(3)

Repeater {
model: itemModel.count

Rectangle {
width: units.gu(3); height: width
radius: units.gu(1.5)
color: view.currentIndex == index ? "blue" : "yellow"

MouseArea {
width: units.gu(3); height: width
anchors.centerIn: parent
onClicked: view.currentIndex = index
}
}
}
}
}
}

在上面的例程中，我们可以点击下面的圆点来切换我们的page。我们也可以利用ListView的特性来左右swipe我们的画面来改变当前的Page号码。这种情况适合于展示不同页面，而且每个页面也不同的情况。

我们的源码在： https://github.com/liu-xiao-guo/visualitemmodel