前言

对于开发用户界面，最重要的一方面是保持数据与可视化的分离。例如，一个电话簿可以使用一个垂直文本链表排列或者使用一个网格联系人图片排列。在这两种情况中，数据都是相同的，但是可视化效果却是不同的。这种方法通常被称作模型-视图模式。在这种模式中，数据通常被称作模型，可视化处理称作视图。

在QtQuick中，数据通过模型-视图分离。对于每个视图，每个数据元素的可视化都分给一个代理。QtQuick附带了一组预定义的模型与视图。想要使用这个系统，必须理解这些类，并且知道如何创建合适的代理来获得正确的显示和交互。

基础模型

最基础的分离数据与显示的方法是使用Repeater元素。它被用于实例化一组元素项，并且很容易与一个用于填充用户界面的定位器相结合。

举个简单的例子，下面的例子中，一个repeater元素创建了10个子项，子项的数量由model属性控制。对于每个子项Rectangle包含了一个Text元素，你可以将text属性设置为index的值，因此可以看到子项的编号是0~9。

import QtQuick 2.3import QtQuick.Window 2.2Window {    id: root    visible: true    width: 640    height: 480    Column {        spacing: 2        Repeater {            model: 10            Rectangle {                width: 100                height: 40                radius: 3                color: "lightblue"                Text {                    anchors.centerIn: parent                    text: index                }            }        }    }}

运行效果如下：

上面的示例是一个不错的编号列表，有时我们想显示一些更复杂的数据的话，使用一个JavaScript序列来替换整型变量model的值可以达到我们的目的。序列可以使用任何类型的内容，可以是字符串，整数，或者对象。在下面的例子中，使用了一个字符串链表。我们仍然使用index的值作为变量，并且我们也访问modelData中包含的每个元素的数据。

import QtQuick 2.3import QtQuick.Window 2.2Window {    id: root    visible: true    width: 640    height: 480    Column {        spacing: 2        Repeater {            model: ["星期一", "星期二", "星期三", "星期四", "星期五", "星期六", "星期日"]            Rectangle {                width: 100                height: 40                radius: 3                color: "lightblue"                Text {                    anchors.centerIn: parent                    text: index + ":" + modelData                }            }        }    }}

运行效果如下：

将数据暴露成一组序列，你可以通过标号迅速的找到你需要的信息。这是一个最简单的模型，也是经常会用到的ListModel(l链表模型)。一个链表模型由许多ListElement(链表元素)组成。在每个链表元素中，可以绑定值在属性上。例如在下面这个例子中，每个元素都提供了一个名字和一个颜色。

import QtQuick 2.3import QtQuick.Window 2.2Window {    id: root    visible: true    width: 640    height: 480    Column {        spacing: 2        Repeater {            model: ListModel {                ListElement { name: "水星"; surfaceColor: "gray" }                ListElement { name: "金星"; surfaceColor: "yellow" }                ListElement { name: "地星"; surfaceColor: "blue" }                ListElement { name: "火星"; surfaceColor: "orange" }                ListElement { name: "木星"; surfaceColor: "orange" }                ListElement { name: "土星"; surfaceColor: "yellow" }                ListElement { name: "天星"; surfaceColor: "lightblue" }                ListElement { name: "海王星"; surfaceColor: "lightblue" }            }            Rectangle {                width: 100                height: 40                radius: 3                color: "lightblue"                Text {                    anchors.centerIn: parent                    text: name                }                Rectangle {                    anchors.left: parent.left                    anchors.verticalCenter: parent.verticalCenter                    anchors.leftMargin: 2                    width: 16                    height: 16                    radius: 8                    border.color: "black"                    border.width: 1                    color: surfaceColor                }            }        }    }}

运行效果如下：

上面的例子中，每个元素的属性绑定连接到repeater实例化的子项上。这意味着变量name和surfaceColor可以被repeater创建的每个Rectangle和Text项引用。这不仅可以方便的访问数据，也可以使源代码更加容易阅读。surfaceColor是名字左边的圆的颜色。

repeater内容的每个子项实例化时绑定了默认的代理。这意味着上面第一个例子中的代码和下面的代码是相同的。注意，唯一不同的是delegate属性名，我们将会在后面详细讲解。

import QtQuick 2.3import QtQuick.Window 2.2Window {    id: root    visible: true    width: 640    height: 480    Column {        spacing: 2        Repeater {            model: 10            delegate: Rectangle {                width: 100                height: 40                radius: 3                color: "lightblue"                Text {                    anchors.centerIn: parent                    text: index                }            }        }    }}