QmlBook in chinese 编程之九 --（Basic Model）

基础模型（Basic Model）

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

   最基本的实现举例，repeater元素用于实现子元素的标号。每个子元素都拥有一个可以访问的属性index，用于区分不同的子元素。在下面的例子中，一个repeater元素创建了10个子项，子项的数量由model属性控制。
 

  先创建Box.qml文件：

Rectangle {
    id: root
    width: 64
    height: 64
    color: "#ffffff"
    border.color: Qt.darker(color, 1.2)
    property alias text: label.text
    property color fontColor: '#1f1f1f'
    Text {
        id: label
        anchors.centerIn: parent
        font.pixelSize: 14
        color: root.fontColor
    }
}

创建BlueBox.qml文件：

import QtQuick 2.0

Box {
    color:"#157efb"
}

对应代码：

Column {
    spacing: 2

    Repeater {
        model: 10
        BlueBox {
            width: 120
            height: 32
            text: index
        }
    }
}

上面的方式我们变化一下，我们仍然使用index的值作为变量，并且我们也访问modelData中包含的每个元素的数据。

Column {
     spacing: 2
     x:10
     y:20
     width: 400
     height: 300
     Repeater{

        model: ["Enterprise", "Columbia", "Challenger",
            "Discovery", "Endeavour", "Atlantis"]

        BlueBox{
            width: 100
            height: 22
            radius: 3
            text:  modelData + ' (' + index + ')'
        }
     }
}

       ListModel（链表模型） 。一个链表模型由许多ListElement（链表元素） 组成。在每个链表元素中，可以绑定值到属性上。例如在下面这个例子中，每个元素都提供了一个名字和一个颜色。
   就像下面这个图一样：

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

Column {
    spacing: 2

    Repeater{
       model: ListModel{
              ListElement{name:"吉法师"; surfaceColor:"gray"}
              ListElement{name:"icy"; surfaceColor:"yellow"}
              ListElement{name:"比卡丘不皮"; surfaceColor:"blue"}
              ListElement{name:"狗哥"; surfaceColor:"orange"}
              ListElement{name:"小鱼人"; surfaceColor:"yellow"}
              ListElement{name:"千古"; surfaceColor:"lightBlue"}
              ListElement{name:"建波系类"; surfaceColor:"lightBlue"}
              ListElement{name:"法师迷系类"; surfaceColor:"yellow"}
              ListElement{name:"黑粉系类"; surfaceColor:"blue"}
       }

       BlueBox{
           width: 120
           height: 32

           radius: 3
           text: name
           Box {
               anchors.left: parent.left
               anchors.verticalCenter: parent.verticalCenter
               anchors.leftMargin: 4

               width: 16
               height: 16

               radius: 8

               color: surfaceColor
           }
       }
    }


}

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

Column {
    spacing: 2

    Repeater {
        model: 10

        delegate: BlueBox {
            width: 120
            height: 32
            text: index
        }
    }
}

目前先到这里吧，以后有时间，继续更新。