MVD（一-Model/View之Repeater）

分离数据与显示的基础模型 Repeater

代码：

import QtQuick 2.9
import QtQuick.Window 2.2

Window {
    visible: true
    width: 640
    height: 480
    title: qsTr("Hello World")

    // 定位器
    Column{
        spacing: 10
        x:20
        y:20
        Repeater{
            // 数据项有十项
            model: 10

            Rectangle{
                width: 100
                height: 20

                radius: 3

                color: "red"

                Text {
                    anchors.centerIn: parent
                    // 打印数据项编号
                    text: index
                }
            }
        }
    }
}

这里面 Rrepreater是一个制造/管理数据项的 Model（Model负责产生数据，也因此称Repeater 是最基本的Model/View），然后将数据给了定位器 Column去排列显示！

mdelData

• 我们可以使用一个序列来替换 model 的值（在前一个例子中model仅仅是一个整形）
  序列可以使用任何类型的内容，可以是字符串，整数，或者对象

• 接下来使用字符串数组作为序列的内容并且演示怎么使用序列！

        Repeater{
            // 数据项有十项
            model: ["Enterprise","Colombia","Challenger",
                "Discovery","Endeavour","Atlantis"]

            Rectangle{
                width: 100
                height: 20

                radius: 3

                color: "red"

                Text {
                    anchors.centerIn: parent
                    // 打印数据项编号
                    text: index + ": " + modelData
                }
            }
        }

将 model 视为个数组，使用的时候直接使用数组名！

ListModel

上面我们使用序列赋值给了 model，ListModel也是序列（由每一项ListElement组成的序列），其中每一项都是一个元素（Element），并且 Repeater 中对ListElement的属性可以直接引用！

代码：

import QtQuick 2.9
import QtQuick.Window 2.2

Window {
    visible: true
    width: 640
    height: 480
    title: qsTr("Hello World")
    color: "blue"

    // 定位器
    Column{
        spacing: 10
        x:20
        y:20
        Repeater{
            // ListElement组成的序列
            model: ListModel{
                ListElement { name: "Mercury"; surfaceColor: "gray" }
                ListElement { name: "Venus"; surfaceColor: "yellow" }
                ListElement { name: "Earth"; surfaceColor: "blue" }
                ListElement { name: "Mars"; surfaceColor: "orange" }
                ListElement { name: "Jupiter"; surfaceColor: "orange" }
                ListElement { name: "Saturn"; surfaceColor: "yellow" }
                ListElement { name: "Uranus"; surfaceColor: "lightBlue" }
                ListElement { name: "Neptune"; surfaceColor: "lightBlue"}
            }

            Rectangle{
                width: 200
                height: 40

                radius: 3

                color: "gray"

                Text {
                    anchors.centerIn: parent
                    // 可以直接引用序列的属性
                    text: name
                }

                // 显示在矩形左边的圆形
                Rectangle{
                    anchors.left: parent.left
                    anchors.verticalCenter: parent.verticalCenter
                    anchors.leftMargin: 2


                    width: 20
                    height: 20

                    radius: 10

                    border.color: "black"
                    border.width: 2

                    // 直接引用序列的属性
                    color: surfaceColor
                }
            }
        }
    }
}

关键部分注释了！

运行>>

beautiful~