从Qt官方文档学习qml（四） 模型与视图

平台：qtcreator 5.12.6  win10

转载：Qt官方网站

概念：

译文： 模型 -包含数据及其结构。有几种用于创建模型的QML类型。

           视图-显示数据的容器。该视图可能会在列表或网格中显示数据。

           委托 -指示数据应如何在视图中显示。委托将模型中的每个数据封装起来。可以通过委托访问数据。委托还可以将数据写回到可编辑的模型中（例如，在TextField的onAccepted Handler中）。

 

代码：

import QtQuick 2.12
import QtQuick.Window 2.12

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

    //模型
    ListModel{
        id:nameModel
        ListElement{name:"Alice"}
        ListElement{name:"boh"}
        ListElement{name:"ww"}
    }
    Component{
        id:nameDelegate
        Text {
            text: name
            font.pixelSize: 24
        }

    }

    //视图
    ListView {
        anchors.fill: parent
        clip: true
        model: nameModel
        delegate: nameDelegate
        header: bannercomponent
        footer: Rectangle {
            width: parent.width; height: 30;
            gradient: clubcolors
        }
        highlight: Rectangle {
            width: parent.width
            color: "lightgray"
        }
    }

    Component {     //instantiated when header is processed
        id: bannercomponent
        Rectangle {
            id: banner
            width: parent.width; height: 50
            gradient: clubcolors
            border {color: "#9EDDF2"; width: 2}
            Text {
                anchors.centerIn: parent
                text: "Club Members"
                font.pixelSize: 32
            }
        }
    }
    Gradient {
        id: clubcolors
        GradientStop { position: 0.0; color: "#8EE2FE"}
        GradientStop { position: 0.66; color: "red"}
    }
}