1、QML使用了与Qt中Model-View类似的结构
1)模型类提供了数据。
A)模型可以使用QML的简单数据,或者复杂的C++数据
B)QML:ListModel,XmlListModel,VisualItemModel
C)C++:QAbstractItemModel,QStringList,QList<QObject*>
2)视图显示模型提供的数据,包括ListView,GridView,PathView,Repeater(all QML),且都自动支持滚动
3)代理为视图创建模型中数据的实例
4)HightLight控件用来高亮视图里面选中的item
For Reference:Model-View in Qt
Model为其他部件提供数据的接口(QAbstractItemModel)
View获取model的indices(indices是对数据的引用)
Delegate用来定制View中的数据显示方式(当用户编辑时,Delegate直接与Model交互)
在这种结构中,Model就是我们的数据,Delegate是一个描述model中每条数据的显示方式的控件,View是可视的元素,使用Delegate来显示Model中的数据。
示例一:
// Define the data in MyModel.qml - data is static in this simple case
import QtQuick 2.0
ListModel {
id: contactModel
ListElement {
name: "Bill Smith"
number: "555 3264"
}
ListElement {
name: "John Brown"
number: "555 8426"
}
ListElement {
name: "Sam Wise"
number: "555 0473"
}
}
示例二:
// Create a view to use the model e.g. in MyList.qml
import QtQuick 2.0
Rectangle {
width: 180; height: 200
color: "green"
// Define a delegate component. A delegate will be
// instantiated for each visible item in the list.
Component {
id: delegate
Item {
id: wrapper
width: 180; height: 40
Column {
x: 5; y: 5
Text {text: '<b>Name:</b>' + name}
Text {text: '<b>Number:</b>' + number}
}
}
}
// Define a hightlight component. Just one of these will be
// instantiated by each ListView and placed behind the current item.
Component {
id: highlight
Rectangle {
color: "lightsteelblue"
radius: 5
}
}
// The actual list
ListView {
width: parent.width; height: parent.height
model: MyModel{}// Refers to MyModel.qml
delegate: delegate// Refers to the delegate component
highlight: hightlight // refers to the hightlight component
focus: true
}
}
2、网格视图(GridView)
它以网格的形式显示数据,与ListView的使用方式一致
如:
GridView {
width: parent.width; height: parent.height
model: MyModel
delegate: delegate
highlight: highlight
cellWidth: 80; cellHeight: 80
focus: true
}
3、路径视图(PathView)
通过一个独立的Path Object格式化数据的显示方式。一些独立的元素可以用于初始化Path,如PathLine,PathQuad,PathCubic。在Path上的items的分布是由PathPercent元素定义的。Items的显示方式是通过PathAttribute元素来控制的
示例一:
PathView { // With equl distribution of dots
anchors.fill: parent
model: MyModel
delegate: delegate
path: 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 { // With 50% of the dots in the buttom part
anchors.fill: parent
model: MyModel
delegate: delegate
path: 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}
}
}
效果如下:
示例三:
Component {
id: delegate
Item {
id: wrapper
width: 80; height: 80
scale: PathView.scale
opacity: PathView.opacity
Column {
Image {}
Text {}
}
}
}
PathView { // With 50% of the dots in the buttom part
anchors.fill: parent
model: MyModel
delegate: delegate
path: Path {
startX: 120; startY: 100
PathAttribute {name: "scale"; value: 1.0}
PathAttribute {name: "opacity"; value: 1.0}
PathQuad {x:120; y: 25; controlX: 260; controlY: 75}
PathAttribute {name: "scale"; value: 0.3}
PathAttribute {name: "opacity"; value: 0.5}
PathQuad {x: 120; y: 100; controlX: -20; controlY: 75}
}
}
效果如下:
4、Repeater
其用于创建大量其他items实例的元素。
model的使用和前面的view元素很像,model的数据类型可以是object list,a string list, a number, or a Qt/C++ model。当前的model index可以通过index属性访问。
如:
Column {
Repeater {
model: 10 // The model is just a number here
Text {
text: "I'm item " + index
}
}
}
效果如下:
Repeater所创建的items是按照顺序插入到这个Repeater的parent中的,可以在layout中使用Repeater。
如:
Row {
Rectangle {
width: 10; height: 20; color: "red"
}
Repeater {
model: 10
Rectangle {
width: 20; height: 20; radius: 10; color: "green"
}
}
Rectangle {
width: 10; height: 20; color: "blue"
}
}
效果如下:
5、Flickable
该属性可以让其子元素被拖拽和滚动,所以没有必要创建一个MouseArea或者处理鼠标事件的函数。Flickable界面很容易通过属性配置:flickDirection,flickDeceleration,horizontalVelocity,verticalVelocity,boundsBehavior,...
很多QML元素默认是flickable的,比如说ListView的元素
示例如下:
Flickable {
width: 200; height: 200
contentWidth: image.width; contentHeight: image.height
Image {
id: image
source: "images/ball.png"
}
}