标签：
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
}
}
代码：git clone https://gitcafe.com/ubuntu/visualitemmodel1.git
我们的另外一个例程代码展示如下：
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
}
}
}
}
}
}
版权声明：本文为博主原创文章，未经博主允许不得转载。
在QML应用中使用VisualItemModel让QML Iteml成为model来显示数据
标签：
原文地址：http://blog.csdn.net/ubuntutouch/article/details/47292249
