QML进阶教程：五、模型-视图-代理（MVD）

前言：

在编程实践中，我们经常会有意无意的运用MVC模式（模型(Model)、视图(View)和控制器(Controller)），而在QtQuick中，数据通过model-view（模型-视图）分离。对于每个view（视图），每个数据元素的可视化都分给一个代理（delegate）。
在QML中，model（模型）与view（视图）都通过delegate（代理）连接起来。功
能划分如下，model（模型）提供数据。对于每个数据项，可能有多个值。显示在
view（视图）中的每项数据,都是通过delegate（代理）来实现可视化。view（视
图）的任务是排列这些delegate（代理），每个delegate（代理）将model item（模型项）的值显示给用户。

一、基础模型（Basic Model）

最基本的实现：使用repeater元素用于实现子元素的标号。每个子元素都拥有一个可以访问的属性index，用于区分不同的子元素。在下面的例子中，一个repeater元素创建了10个子项，子项的数量由model属性控制。对于每个子项Rectangle包含了一个Text元素，你可以将text属性设置为index的值，因此可以看到子项的编号是0~9。

import QtQuick 2.0
import "BlueBox.qml"//使用自定义组件
Column {spacing: 8Repeater {model: ["Enterprise", "Colombia", "Challenger", "Discovery", "Endeavour", "Atlantis"]BlueBox {width: 100height: 32radius: 3text: modelData + ' (' + index + ')'}}
}

BlueBox源码：

import QtQuick 2.0Rectangle {id: rootwidth: 64height: 64color: "#157efb"border.color: Qt.darker(color, 1.2)//声明属性的别名property alias text: label.text//声明自定义属性property color fontColor: '#1f1f1f'Text {id: labelanchors.centerIn: parentfont.pixelSize: 14color: root.fontColor}
}

二、链表模型

import QtQuick 2.0
import "../common"Background {width: 180height: 300ListView {anchors.fill: parentanchors.margins: 20clip: true//可裁剪model: 100//整数，提供给代理使用的索引值（index ）delegate: numberDelegatespacing: 5}Component {id: numberDelegateGreenBox {width: 40height: 40text: index}}
}

效果如下：

每个数据的入口是模型，视图通过可视化代理来实现数据的可视化。将数据从显示中分离出来。一个模型可以是一个整数，提供给代理使用的索引值（index ）。如果JavaScript数组被作为一个模型，模型数据变量（modelData）代表了数组的数据的当前索引。对于更加复杂的情况，每个数据项需要提供多个值，使用链表模型（ListModel）与链表元（ListElement）是一个更好的解决办法。对于静态模型，一个Repeater可以被用作视图。它可以非常方便的使用行（Row），（Column），栅格（Grid），或者流（Flow）来创建用户界面。对于动态或者大的数据模型，使用ListView或者GridView更加适合。它们会在需要时动态的创建代理，减少在场景下一次显示的元素的数量。